微信小程序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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
js微信分享API
Oct 11 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
vue操作dom元素的3种方法示例
Sep 20 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抓即时股票信息
2006/10/09 PHP
phpfans留言版用到的install.php
2007/01/04 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php基本函数汇总
2015/07/09 PHP
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python中IPYTHON入门实例
2015/05/11 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
行政总监岗位职责
2013/12/05 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
演讲开场白台词大全
2015/05/29 职场文书
公司人事管理制度
2015/08/05 职场文书
python前后端自定义分页器
2022/04/13 Python