scroll-view

scroll-view 中分別有上下豎向滑動和左右橫向滑動之分，在此次項目中恰好須要用到橫向滑動，但在測試過程當中發現橫向滑動沒有了效果（靜止在那裏沒移動過），經調試發現：

1.scroll-view 中的須要滑動的元素不能夠用 float 浮動；

2.scroll-view 中的包裹須要滑動的元素的大盒子用 display:flex; 是沒有做用的；

3.scroll-view 中的須要滑動的元素要用 dislay:inline-block; 進行元素的橫向編排；

4.包裹 scroll-view 的大盒子有明確的寬和加上樣式-->  overflow:hidden;white-space:nowrap;

<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>

 

text:'國際中心2號樓1414的小公舉 剛剛下單了一份「麻辣小龍蝦」 請儘快接單喲~',

    marqueePace: 1,//滾動速度

    marqueeDistance: 0,//初始滾動距離

    marquee_margin: 30,

    size: 14,//尺寸大小

    interval: 20, // 時間間隔

//在生命週期函數——監聽頁面顯示處添加自動滾動

　onshow:function(){

  // 頁面顯示

    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"

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

    }

  }

}

 

 

利用css3實現滑動的案例有：

wxml部分：

<block wx:for="{{marquelist}}" wx:key="" >

    <view  class="marquee_container" style="--marqueeWidth--:60rpx;">

        <view  class='marquee_tex'>

          <text>{{item.texts}}</text>

        </view>

      </view>

    </block>

wxss部分：

  /*跑馬燈效果*/

@keyframes around {

  from {

   margin-left:750rpx;

  }

  to {

   /* var接受傳入的變量 */

   margin-left: var(--marqueeWidth--);

  }

}

.marquee_container{

  width:100%;

  /* background: red; */

  height:70rpx;

  display: flex;

  flex-direction: column;

  justify-content:center;

  align-items: center;

  /* box-sizing: border-box; */

}

.marquee_container:hover{

  /* 不起做用 */

  animation-play-state: paused;

}

.marquee_tex{

  width:100%;

  overflow: hidden;

  white-space: nowrap;

  font-size:28rpx;

  display: inline-block;

  color:#de735c;

  animation-name: around;

  animation-duration: 10s;  /*過渡時間*/

  animation-iteration-count: infinite;

  animation-timing-function:linear;

}