Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

微信小程序scroll-view仿拼多多横向滑动滚动条

来源:中文源码网    浏览:2825 次    日期:2024-03-29 06:12:30
【下载文档:  微信小程序scroll-view仿拼多多横向滑动滚动条.txt 】


微信小程序scroll-view仿拼多多横向滑动滚动条
本文实例为大家分享了微信小程序横向滑动滚动条的具体代码,供大家参考,具体内容如下
效果图
实现代码
index.wxml





{{childItem.name}}





{{childItem.name}}









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;
}
项目地址:微信小程序横向滑动滚动条
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。

相关内容