滚动条的制作

时间：2019-04-02 15:29:17 阅读：156 评论：0 收藏：0 [点我收藏+]

标签：滚动条 rcu name lock nbsp 100% top title 下单

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

滚动条的制作

标签：滚动条 rcu name lock nbsp 100% top title 下单

原文地址：https://www.cnblogs.com/Annely/p/10642782.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行