滾動條的製做

製做滾動條除了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: '請儘快搶單喲~~'

      },

      ]

 

方法2

 

<scroll-view scroll-x='true' class="notice">

    <view class='scrolltxt'>

      <view class='marquree_box'>

        <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">

          <text>{{text}}</text>

          <text style="margin-right:{{marquree_marign}}px;">{{text}}</text>

          <text style="margin-right:{{marquree_marign}}px;">{{text}}</text>

        </view>

      </view>

    </view>

  </scroll-view>

.notice { */

  /* */

margin-left: 90rpx;

  display: flex;

  width: 660rpx;

  align-items: center;

}

.scrolltxt {

  height: 60rpx;

}

.marquree_box {

  font-size: 26rpx;

  height: 60rpx;

  display: flex;

  align-items: center;

  color: #b09961;

}

.marquee_text {

  overflow: hidden;

  white-space: nowrap;

  height: 60rpx;

  line-height: 60rpx;

}

 

text: "當前訂單買家打賞「6元」，送到「國際0中心2號樓14樓14號」",

    marqueePace: 0.5,

    // 滾動速度

    marqueeDistance: 0,

    // 初始滾動距離

    marquee_margin: 30,

    size: 14,

    // 尺寸大小

    interval: 20,

    // 時間間隔

 

 

  notic() {

    // 頁面顯示

    var that = this;

    var length = that.data.text.length * that.data.size; //文字長度

    var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕寬度

    //console.log(length,windowWidth);

    that.setData({

      length: length,

      windowWidth: windowWidth

    });

    that.scrolltxt(); // 第一個字消失後當即從右邊出現

  },

  scrolltxt: function() {

    var that = this;

    var length = that.data.length; //滾動文字的寬度

    var windowWidth = that.data.windowWidth; //屏幕寬度

    if (length > windowWidth) {

      var interval = setInterval(function() {

        var maxscrollwidth = length + that.data.marquee_margin; //滾動的最大寬度，文字寬度+間距，若是須要一行文字滾完後再顯示第二行能夠修改marquee_margin值等於windowWidth便可

        var crentleft = that.data.marqueeDistance;

        if (crentleft < maxscrollwidth) { //判斷是否滾動到最大寬度

          that.setData({

            marqueeDistance: crentleft + that.data.marqueePace

          })

        } else {

          //console.log("替換");

          that.setData({

            marqueeDistance: 0 // 直接從新滾動

          });

          clearInterval(interval);

          that.scrolltxt();

        }

      }, that.data.interval);

    } else {

      that.setData({

        marquee_margin: "1000"

      }); //只顯示一條不滾動右邊間距加大，防止重複顯示

    }

  },