微信小程序实现横向滚动条
本文实例为大家分享了微信小程序横向滚动条的具体代码,供大家参考,具体内容如下
微信小程序scroll-view实现横向滑动滚动
效果图如下:
左右滑动效果展示如下:
实现代码:
index.wxml
<view class="hotService"> <view class="hotServiceList_box"> <!-- 这里为滚动的内容部分 --> <scroll-view class="hotServiceList_scroll" scroll-x="true" bindscroll="getleft"> <view class="hotService_content"> <block wx:for="{{dataList}}" wx:key="{{index}}"> <view class="block{{index}} block"> <view class="blockContent"> <text>第{{index + 1}}块内容</text> </view> </view> </block> </view> </scroll-view> <!--滚动条部分--> <view class="slide" wx:if="{{slideShow}}"> <view class='slide-bar'> <view class="slide-show" style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};"></view> </view> </view> </view> </view>
index.js
const app = getApp() Page({ data: { // 滑动比例计算 slideWidth: '', //滑块宽 slideLeft: 0, //滑块位置 totalLength: '', //当前滚动列表总长 slideShow: false, //滑块是否显示 slideRatio: '', //滑块比例 // 渲染数据 dataList: [{ text: '第1块' },{ text: '第2块' }, { text: '第3块' },{ text: '第4块' },{ text: '第5块' },{ text: '第6块' }], }, onLoad: function () { // 这里是获取视口口宽度 var systemInfo = wx.getSystemInfoSync(); this.setData({ windowWidth: systemInfo.windowWidth, }) this.getRatio() }, getRatio() { if (this.data.dataList.length < 4) { this.setData({ slideShow: false }) } else { var _totalLength = this.data.dataList.length * 173; //分类列表总长度 var _ratio = 80 / _totalLength * (750 / this.data.windowWidth); //滚动列表长度与滑条长度比例 var _showLength = 750 / _totalLength * 80; //当前显示蓝色滑条的长度(保留两位小数) this.setData({ slideWidth: _showLength, totalLength: _totalLength, slideShow: true, slideRatio: _ratio }) } }, //slideLeft动态变化 getleft(e) { this.setData({ slideLeft: e.detail.scrollLeft * this.data.slideRatio }) }, })
index.wxss
.hotService{ width: 100%; height: 300rpx; background-color: #fff; padding: 0 26rpx; box-sizing: border-box; } .hotServiceList_box { position: relative; overflow: hidden; white-space: nowrap; width: 100%; } .block { width: 158rpx; height: 158rpx; padding: 0 10rpx; display: inline-block; } .blockContent{ width: 100%; height: 100%; background-color: rgb(101, 203, 243); color:#fff; display: flex; justify-content: center; align-items: center; } .block:first-child { padding: 0 15rpx 0 0; } .slide{ height: 20rpx; background:#fff; width:100%; padding:14rpx 0 5rpx 0 } .slide .slide-bar{ width: 80rpx; margin:0 auto; height: 10rpx; background:#eee; border-radius: 8rpx; } .slide .slide-bar .slide-show{ height:100%; border-radius: 8rpx; background-color: #00aeff; }
index.json
{ "usingComponents": {} }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)