ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

uniapp - cell组件

2020-01-09 20:01:42  阅读:1306  来源: 互联网

标签:uniapp hover 示例 sunui cell 点击 组件


 

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

 

v1.0.0 于 2020.01.09更新

 

 

参数介绍:

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

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

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

 

 

示例代码:

 

<template>
	<view class="index-page">
		<view v-for="(item,index) in 10" :key='index'>
			<sunui-cell :hover="true" styles="margin-top: 10rpx;border-top:1px solid #eee;border-bottom:1px solid #eee;">
				<view style="padding: 12px 15px;">
					点击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

 

标签:uniapp,hover,示例,sunui,cell,点击,组件
来源: https://www.cnblogs.com/cisum/p/12173278.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有