微信小程序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 相关文章推荐
Javascript图像处理思路及实现代码
Dec 25 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
浅谈js数组splice删除某个元素爬坑
Oct 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
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
python之yield表达式学习
2014/09/02 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python2.7的编码问题与解决方法
2016/10/04 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python File readlines() 使用方法
2018/03/19 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python滑块验证码的破解实现
2019/11/10 Python
python序列化与数据持久化实例详解
2019/12/20 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
管理科学大学生求职信
2013/11/13 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
小松树教学反思
2014/02/11 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
中职生求职信
2014/07/01 职场文书
工作服管理制度范本
2015/08/06 职场文书
商业计划书之服装
2019/09/09 职场文书