微信小程序自制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;

}

http://blog.csdn.net/hanxue_tyc/article/details/78674075

原文地址:https://www.cnblogs.com/xiaobai-y/p/8342917.html

时间: 2024-10-02 03:45:52

微信小程序自制scroll-view横向滑动滚动条的相关文章

微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

引用:https://www.cnblogs.com/till-the-end/p/8935152.html 简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论 解决过程 1.在想要实现这个问题的时候找了不少别人的

微信小程序 使用swiper制作一个滑动导航

最近在做一个导航的时候,发现使用overflow-x: auto来做多内容滑动导航效果很不好,思索是不是可以使用swiper来做一个,研究了下其实发现原理基本相同 这里说下,要用swiper做导航菜单,有几个要特别注意的参数 1:autoplay,官方说明[是否自动切换],这个不填,菜单可不能自己动 2:indicator-dots ,官方说明[是否显示面板指示点],这个也不填, 3:display-multiple-items,官方说明[同时显示的滑块数量],敲重点,这个参数必须设为1,要与p

微信小程序swiper禁止用户手动滑动

最近做一个项目,由于用到了竖向swiper,导致占用屏幕过大,用户滑动总是滑动到swiper组件,页面无法向下拉动,于是找各种办法禁止用户手动滑动swiper组件. 经过网上一番查找,网友们也是闹洞大开,各种方法都想出来了,有用透明蒙层覆盖的,这不失为一种很好的解决办法,但是如果swiper上有元素需要点击就没有办法了. 继续查找,于是找到了用  catchtouchmove  事件来截获用户手动滑动事件,这样既解决了禁用用户手动滑动,有解决了有点击按钮不影响使用 贴代码: WXML: <swi

微信小程序-scroll-view横向滚动和上拉加载

今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

全栈开发工程师微信小程序-中(下)

微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> {{message}} <view> index.js Page({ data: ({ message: 'Hello' }) }) // 组件属性 // data中的数据绑定到微信小程序组件上 <view id="item-{{id}}"></view> Page({ data: {

如何使用微信小程序开发一个弹窗页面(附源码)

在小程序的开发过程中,我们肯定会遇到开发一个弹窗页面的情况,我们先看一下小程序官方对于弹窗页面的解释.API的接口如下 从官方给出的代码示例来看,想当简单,就像一个asert,并不能看出弹窗的真实需求.所以今天HTML51.COM就写了一个弹窗小程序教程,供大家学习参考.首页我们先看一下动态的效果图: 我们首先看到的是首页代码: <view class="copyright"> <view class="copyright_item">Cop

SAP成都研究院大卫哥:SAP C4C中国本地化之微信小程序集成

今天的文章来自Wu David,SAP成都研究院C4C开发团队的架构师,在加入团队之前曾经在SAP上海研究院工作,组内同事习惯亲切地称呼他为大卫哥. 大卫哥身高据Jerry目测有1米8以上,是成都C4C开发团队身高最高的几位男同事之一.身体非常结实,是成都SAP篮球队的成员之一.有一次大卫哥坐在自己座位上,一手撑在桌子上认真地看着向他求助的同事电脑上打印的日志,飞机哥张航拍了一张大卫哥的背影,评价道:"从照片里看出了大卫哥发达的背阔肌." 飞机哥张航后来完成了一幅素描,下图左边正在沉思

微信小程序中如何实现文本换行

问题 微信小程序<text>和<view>标签并不能让文本自动换行,微信小程序也不支持 <br/>换行 解决方案 替换<br/>标签 为 \n 使用 css 属性 :white-space:pre-wrap <view style=”white-space:pre-wrap”> 文本保留空格和回车 </view> 原文地址:https://www.cnblogs.com/kunmomo/p/12357928.html

{{view 视图层}}微信小程序

微信小程序 view 视图层//自学 1.数据绑定 数据绑定 WXML中的动态数据均来自对应Page的data. 简单绑定 数据绑定使用"Mustache"语法(双大括号)将变量包起来,可以作用于: 内容 <view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } }) 组件属性(需要在双引号之内) <view id="item-{{id}}"> <