在使用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;
}
