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


Posted in Javascript onApril 21, 2020

本文实例为大家分享了微信小程序横向滑动滚动条的具体代码,供大家参考,具体内容如下

效果图

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

微信小程序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;

}

项目地址:微信小程序横向滑动滚动条

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
package.json各个属性说明详解
Mar 11 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 #Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 #Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 #Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 #Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 #Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 #Javascript
vue实现组件之间传值功能示例
Jul 13 #Javascript
You might like
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
10个php函数实用却不常见
2015/10/13 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
js初始化验证实例详解
2016/11/26 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python解释执行原理分析
2014/08/22 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python中round函数如何使用
2020/06/19 Python
python中Django文件上传方法详解
2020/08/05 Python
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
卖房协议书
2014/04/11 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
努力学习演讲稿
2014/05/10 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
网络营销计划书
2015/01/17 职场文书
教师节感谢信
2015/01/22 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
正则表达式拆分url实例代码
2022/02/24 Java/Android