zoukankan      html  css  js  c++  java
  • uniapp

     

    sunui-cell  用于点击效果复用(组件仅1kb+iconfont 2kb)

     

    v1.0.0 于 2020.01.09更新

    v1.0.1 于 2020.01.11更新:新增加右箭头(iconfont)

     

    参数介绍:

    1. hover:是否显示点击效果/默认false

    2. arrow:是否显示右箭头/默认false

    3. time:点击显示时间/默认170ms

    4. cellStyle:组件样式,可按照行内样式编写(无需父组件传值子组件那样死板) - 见示例

    5. arrowStyle:右箭头样式,可按照行内样式编写

    示例代码:

     

    <template>
    	<view class="index-page">
    		<view v-for="(item,index) in 10" :key='index'>
    			<sunui-cell :hover="true" :arrow="true" arrowStyle="color:blue;font-size:40rpx;" cellStyle="margin-top: 10rpx;border-top:1px solid #eee;border-bottom:1px solid #eee;color:#666;">
    				<view style="padding: 12px 15px;">
    					点击hover效果{{index}}点击hover效果{{index}}
    				</view>
    			</sunui-cell>
    		</view>
    	</view>
    </template>
    
    <script>
    	import sunUiCell from '@/components/sunui-cell/sunui-cell.vue';
    	export default {
    		data() {
    			return {}
    		},
    		components: {
    			'sunui-cell': sunUiCell
    		},
    		onShow() {
    
    		},
    		onLoad() {},
    		methods: {}
    	}
    </script>
    
    <style>
    
    </style>
    

      

      

    点击下载示例:sunui-cell

  • 相关阅读:
    洛谷月赛 Hello World(升级版)
    codevs1001 舒适的路线
    vijos & codevs 能量项链
    vijos 运输计划
    noip2016普及组题解和心得
    UVa 10891 Game of Sum
    UVa 10635 Prince and Princess
    某模拟题题解 2016.11.17
    贪心入门题
    某模拟题题解 2016.11.16
  • 原文地址:https://www.cnblogs.com/cisum/p/12173278.html
Copyright © 2011-2022 走看看