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;

}