微信小程序自制scroll-view横向滑动滚动条
效果图
实现代码
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;
}
http://blog.csdn.net/hanxue_tyc/article/details/78674075
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥