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

一开始实现不了，搜的看了三四篇，并没觉得有什么用。也并没理解他们说的 跟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）

//滑动后

标签：function,flex,scrollWidth,菜单,微信,wrap,scroll,view
来源： https://blog.csdn.net/m0_37885651/article/details/89511107