微信小程序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中实现命名空间
Nov 23 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
js实现点击烟花特效
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中生成随机密码的自定义函数代码
2013/10/21 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
javascript正则表达式总结
2016/02/29 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
浅谈js原生拖放
2016/11/21 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python创建xml文件示例
2017/03/22 Python
python妙用之编码的转换详解
2017/04/21 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
详解python的四种内置数据结构
2019/03/19 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python实现对adb命令封装
2020/03/06 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
设置器与访问器的定义以及各自特点
2016/01/08 面试题
上班玩游戏检讨书
2014/02/07 职场文书
2014年会计工作总结
2014/11/27 职场文书
开学随笔
2015/08/15 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript