uniapp - cell组件

Posted Sunsin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp - cell组件相关的知识,希望对你有一定的参考价值。

 

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

以上是关于uniapp - cell组件的主要内容,如果未能解决你的问题,请参考以下文章

uniapp props$ref$emit$parent$child$on$set 是什么?

uniapp props$ref$emit$parent$child$on$set 是什么?

uniapp 之使用 u-upload 组件来实现图片上传

uni-app 代码

uniapp在自定义模板中引入js之后在组件里怎么使用里面的方法

uni-app之实现层级覆盖(app端覆盖原生组件)的问题