滚动条的制作

制作滚动条除了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: '请尽快抢单哟~~'
      },
      ]
 

猜你喜欢

转载自www.cnblogs.com/Annely/p/10642782.html