微信小程序 scroll-view横向滚动,实现写法

心已赠人 2022-04-24 12:46 342阅读 0赞

> 一开始实现不了，搜的看了三四篇，并没觉得有什么用。也并没理解他们说的 跟inline-block影响很大；想了想竖向的原理，觉得应该这样，且已实现滚动。

直接代码(展示五个，超过五个滚动，这写死了)(这主要是在scroll-view的下一级元素 view class=flex-wrap 动态赋值宽度)：

<scroll-view scroll-x="true" scroll-left="{
       {scrollLeftWidth}}" 
    		bindscroll="scrollleft"
            scroll-with-animation='true'
            bindscrolltolower="lowerRight">
    	  <view class="flex-wrap sertit-dis" style='width:{
       {scrollWidth}}px;'>
    	    <view class='flex-item'>
    	      <text>菜单一</text>
    	    </view>
    	    <view class='flex-item'>
    	      <text>菜单二</text>
    	    </view>
    	    <view class='flex-item'>
    	      <text>菜单三</text>
    	    </view>
    	    <view class='flex-item'>
    	      <text>菜单四</text>
    	    </view>
    	    <view class='flex-item'>
    	      <text>菜单五</text>
    	    </view>
    	    <view class='flex-item'>
    	      <text>菜单六</text>
    	    </view>
    	  </view>
    </scroll-view>

Page({
    	data: {
    	    scrollWidth:0,
    	    scrollLeftWidth:0,
    	    windowWidth:0
    	},
    	onLoad:function(){
    		var that = this;
    		that.getScrollWidth();
    	},
    	getScrollWidth: function () {
    	    var scrollWidth = wx.getSystemInfoSync().windowWidth;
    	    this.setData({
    	      scrollWidth: scrollWidth/5 * 6,
    	      windowWidth: scrollWidth
    	    })
    	 },
    	 scrollleft:function(e){
    	    console.log(e);
    	 },
    	 lowerRight:function(e){
    	    console.log(e);
    	 },
    })

.flex-wrap{
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      height:40px;
    }
    .sertit-dis .flex-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }

//滑动前（我原页面是有写好的模仿进度条，为了方便看，scroll-view上的事件都可触发，lowerRight，scrollleft）  
![在这里插入图片描述][20190425103332836.png]  
//滑动后  
![在这里插入图片描述][20190425103404232.png]

[20190425103332836.png]: /images/20220215/86ed339352ea4fcfabe0a2b6562f2dec.png
[20190425103404232.png]: /images/20220215/18eed819d16b4affa4272492795addf1.png