微信小程序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 同时提交多个Web表单的方法
Feb 19 Javascript
js Date概念详细介绍
Nov 22 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
详解Node.js如何处理ES6模块
May 15 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
正则表达式语法
2006/10/09 Javascript
php实现图片上传、剪切功能
2016/05/07 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python 面向对象部分知识点小结
2020/03/09 Python
python爬虫用mongodb的理由
2020/07/28 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
违反课堂纪律检讨书
2014/01/19 职场文书
教学改革实施方案
2014/03/31 职场文书
教师考察材料范文
2014/06/03 职场文书
先进教师事迹材料
2014/12/16 职场文书
护士个人年度总结范文
2015/02/13 职场文书
中学校园广播稿
2015/08/18 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python