滚动条的制作
Posted annely
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动条的制作相关的知识，希望对你有一定的参考价值。
制作滚动条除了scroll-view,还可以使用swiper，其中，默认为横向滚动，若要设置为纵向滚动则为vertical=‘{{ true }}‘
以下为开发中的一个案例：
wxml部分
<view class="elegant">
<swiper style="height:80rpx;" autoplay=‘{{ true }}‘ circular=‘{{ true }}‘ interval=‘5000‘ vertical=‘{{ true }}‘>
<block wx:for="{{textlist}}" wx:key="">
<swiper-item class="tattoo" >
<view >
<text>{{item.name}}</text>
<text>{{item.seller}}</text>
<text>{{item.title}}</text>
</view>
</swiper-item>
</block>
</swiper>
</view>
wxss部分为：
/* 滚动内容 */
.elegant{
">#ffe8e3;
width:650rpx;
height:80rpx;
margin: 0 auto;
}
swipper{
width:100%;
}
.tattoo text{
font-size:24rpx;
color:#9a823b;
padding-left:5rpx;
align-items: center;
line-height: 80rpx;
}
js部分为：
textlist:[
{
id:0,
name:‘1414的小公举刚刚下单了 ‘,
seller:‘麻辣小龙虾一份‘,
title:‘请尽快抢单哟~~‘
},
{
id:1,
name: ‘1414的小公举刚刚下单了 ‘,
seller: ‘水煮鱼一份‘,
title: ‘请尽快抢单哟~~‘
},
{
id:2,
name: ‘1414的小公举刚刚下单了 ‘,
seller: ‘大龙虾一份‘,
title: ‘请尽快抢单哟~~‘
},
]
以上是关于滚动条的制作的主要内容，如果未能解决你的问题，请参考以下文章