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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序 scroll-view横向滚动,实现写法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1459字，纯文字阅读大概需要3分钟。

内容图文

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

//滑动后

内容总结

以上是互联网集市为您收集整理的微信小程序 scroll-view横向滚动,实现写法全部内容，希望文章能够帮你解决微信小程序 scroll-view横向滚动,实现写法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---