时间:2021-05-18
本文实例为大家分享了微信小程序横向滑动滚动条的具体代码,供大家参考,具体内容如下
效果图
实现代码
index.wxml
<scroll-view scroll-x="true" class="scroll-view-x" style="padding-top:10rpx" scroll-with-animation="true" wx:if="{{tlist[currentTab].secondList}}" scroll-left='0' bindscroll="getleft"> <!--内容区域--> <view> <view class="navigator_second" wx:for="{{tlist[currentTab].secondList}}" wx:for-item="childItem" bindtap="getProductList" data-id="{{childItem.id}}"> <image class="navigator_icon" src="{{childItem.icon}}"></image> <text class="navigator_text">{{childItem.name}}</text> </view> </view> <view wx:if="{{tlist[currentTab].thirdList}}"> <view class="navigator_second" wx:for="{{tlist[currentTab].thirdList}}" wx:for-item="childItem" data-id="{{childItem.id}}" bindtap="getProductList"> <image class="navigator_icon" src="{{childItem.icon}}" ></image> <text class="navigator_text">{{childItem.name}}</text> </view> </view> </scroll-view > <!--滚动条部分--> <view wx:if="{{slideShow}}" class="slide"> <view class='slide-bar' > <view class="slide-show" style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};"></view> </view> </view>index.js
//获取应用实例var app = getApp();Page({ data: { navigate_type:'',//分类类型,是否包含二级分类 slideWidth:'',//滑块宽 slideLeft:0 ,//滑块位置 totalLength:'',//当前滚动列表总长 slideShow:false, slideRatio:'' }, onLoad: function () { var self = this ; var systemInfo = wx.getSystemInfoSync() ; self.setData({ list: _list, windowHeight: app.globalData.navigate_type == 1 ? systemInfo.windowHeight : systemInfo.windowHeight - 35, windowWidth: systemInfo.windowWidth, navigate_type: app.globalData.navigate_type }) //计算比例 self.getRatio(); }, //根据分类获取比例 getRatio(){ var self = this ; if (!self.data.tlist[self.data.currentTab].secondList || self.data.tlist[self.data.currentTab].secondList.length<=5){ this.setData({ slideShow:false }) }else{ var _totalLength = self.data.tlist[self.data.currentTab].secondList.length * 150; //分类列表总长度 var _ratio = 230 / _totalLength * (750 / this.data.windowWidth); //滚动列表长度与滑条长度比例 var _showLength = 750 / _totalLength * 230; //当前显示红色滑条的长度(保留两位小数) this.setData({ slideWidth: _showLength, totalLength: _totalLength, slideShow: true, slideRatio:_ratio }) } } , //slideLeft动态变化 getleft(e){ this.setData({ slideLeft: e.detail.scrollLeft * this.data.slideRatio }) } })index.wxss
.scroll-view-x{ background-color: #fff; white-space: nowrap;}.navigator_second{ width:150rpx; text-align:center; display:inline-block; height:115rpx;}.navigator_icon{ width:60rpx; height:60rpx;}.navigator_text{ display:block; width:100%; font-size:24rpx}.slide{ height:30rpx; background:#fff; with:100%; padding:14rpx 0 5rpx 0}.slide .slide-bar{ width:230rpx; margin:0 auto; height:1.5px; background:#eee;}.slide .slide-bar .slide-show{ height:100%; background-color:#ff6969;}项目地址:微信小程序横向滑动滚动条
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
小程序的scroll-view用的比较多了,列表页一般也没管它的滚动条,最近突然发现在android与ios中横向滑动的时候表现不一样。不一样在哪呢,ios上直
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display:inline-blo
失效的scroll-x在微信小程序的文档中,使用scroll-view标签,然后给它设置一个scroll-x就可以实现元素,横向排列,可以左右滑动。。。。然而,
一:scroll-view隐藏滚动条在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法:s
前言:这章我们使用小程序的scroll-view组件实现横向滚动和竖向滚动。GitHub:https://github.com/Ewall1106/miniPr