微信小程序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图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
JS实现滑动插件
Jan 15 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP 实现链式操作
2021/03/09 PHP
jQuery 位置插件
2008/12/25 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
AngularJs每天学习之总体介绍
2017/08/07 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
大学生毕业自我评价范文分享
2013/11/11 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
高三自我评价
2014/02/01 职场文书
奠基仪式策划方案
2014/05/15 职场文书
大学生在校表现评语
2014/12/31 职场文书