uni-app scroll-view组件遇见的坑

4,650 阅读1分钟

在使用uni-app组件的时候,有些组件按照官网上的复制下来,莫得用。

根本就实现不了自己想要的效果。而官网也没有过多的介绍。

这样是uni-app组件不好的地方(个人认为,不喜勿喷)

还要自己去百度,去查找原因。导致第一次使用uni-app的过程坎坷。

<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
	<view>
		<block v-for="(item,index) in  countList" :key="index" :class="{active:orderIndex==index}">
			<view class="list-cont">
				<view>
					<text class="con-text-a">{{item.title}}</text>
				</view>

				<view>
					<text class="con-text-b">{{item.cont}}</text>
				</view>
			</view>
		</block>
	</view>
</scroll-view>
countList: [{
title: "hah",
cont: "jaj"
},
{
title: "hah",
cont: "jaj"
},
{
title: "hah",
cont: "jaj"
},
{
title: "hah",
cont: "jaj"
},
{
title: "hah",
cont: "jaj"
},
{
title: "hah",
cont: "jaj"
},
{
title: "hah",
cont: "jaj"
}
]
}

<style scoped>
	/* 激活类样似 */
     <!--scroll  这个样式如果没有  不会出现滚动哈  官网也没有说    -->
	.scroll {
		white-space: nowrap;
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		background: #FFFFFF;
		padding: 20upx 0;
	}

	.con-text-a {
		color: #292c33;
		font-size: 30upx;
		font-weight: bold;
	}

	.con-text-b {
		color: #9ea095;
		font-size: 23upx;
	}

	.list-cont {
     	width: 180upx;
    	display: inline-block;
    	text-align: center;
	}