微信小程序实现横向滚动条

本文实例为大家分享了微信小程序横向滚动条的具体代码,供大家参考,具体内容如下

微信小程序scroll-view实现横向滑动滚动

效果图如下:

左右滑动效果展示如下:

实现代码:

index.wxml

<view class="hotService">
    <view class="hotServiceList_box">
    <!-- 这里为滚动的内容部分 -->
            <scroll-view class="hotServiceList_scroll" scroll-x="true" bindscroll="getleft">
                <view class="hotService_content">
                    <block wx:for="{{dataList}}" wx:key="{{index}}">
                        <view class="block{{index}} block">
                            <view class="blockContent">
                                <text>第{{index + 1}}块内容</text>
                            </view>
                        </view>
                    </block>
                </view>
            </scroll-view>
        <!--滚动条部分-->
        <view class="slide" wx:if="{{slideShow}}">
            <view class='slide-bar'>
                <view class="slide-show" style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};"></view>
            </view>
        </view>
    </view>
</view>

index.js

const app = getApp()

Page({
  data: {
    // 滑动比例计算
    slideWidth: '', //滑块宽
    slideLeft: 0, //滑块位置
    totalLength: '', //当前滚动列表总长
    slideShow: false, //滑块是否显示
    slideRatio: '', //滑块比例
    // 渲染数据
    dataList: [{
        text: '第1块'
      },{
        text: '第2块'
      }, {
        text: '第3块'
      },{
        text: '第4块'
      },{
        text: '第5块'
      },{
        text: '第6块'
      }],
  },
  onLoad: function () {
    // 这里是获取视口口宽度
    var systemInfo = wx.getSystemInfoSync();
    this.setData({
      windowWidth: systemInfo.windowWidth,
    })
    this.getRatio()
  },
  getRatio() {
    if (this.data.dataList.length < 4) {
      this.setData({
        slideShow: false
      })
    } else {
      var _totalLength = this.data.dataList.length * 173; //分类列表总长度
      var _ratio = 80 / _totalLength * (750 / this.data.windowWidth); //滚动列表长度与滑条长度比例
      var _showLength = 750 / _totalLength * 80; //当前显示蓝色滑条的长度(保留两位小数)
      this.setData({
        slideWidth: _showLength,
        totalLength: _totalLength,
        slideShow: true,
        slideRatio: _ratio
      })
    }
  },
  //slideLeft动态变化
  getleft(e) {
    this.setData({
      slideLeft: e.detail.scrollLeft * this.data.slideRatio
    })
  },

})

index.wxss

.hotService{
  width: 100%;
  height: 300rpx;
  background-color: #fff;
  padding: 0 26rpx;
  box-sizing: border-box;
}
.hotServiceList_box {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.block {
  width: 158rpx;
  height: 158rpx;
  padding: 0 10rpx;
  display: inline-block;
 
}
.blockContent{
  width: 100%;
  height: 100%;
  background-color: rgb(101, 203, 243);
  color:#fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block:first-child {
  padding: 0 15rpx 0 0;
}
.slide{
  height: 20rpx;
  background:#fff;
  width:100%;
  padding:14rpx 0 5rpx 0
 }
 .slide .slide-bar{
  width: 80rpx;
  margin:0 auto;
  height: 10rpx;
  background:#eee;
  border-radius: 8rpx;
 }
 .slide .slide-bar .slide-show{
  height:100%;
  border-radius: 8rpx;
  background-color: #00aeff;
 }

index.json

{
  "usingComponents": {}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序 scroll-view隐藏滚动条详解

    一:scroll-view隐藏滚动条 在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事

  • 微信小程序设置滚动条过程详解

    原因 原来在app.wxss中定义了如下的内容[不知道是不是新建项目自动生成的,这里也就提供了隐藏滚动条的思路啦] ::-webkit-scrollbar { width: 0px; height: 0px; color:#transparent; } what, 宽高为0,而且还是透明的,难怪,好吧,修改宽高4px,color设置为green,以为可以了,呵呵,太年轻. scroll-viwe依然没有滚动条,以为是布局原因,导致滚动条消失在界面外,我将宽高设为20px,想想也是搞笑,设这么宽,

  • 微信小程序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-view隐藏滚动条的方法详解

    效果图: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示: 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的: 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排: 4.包裹 scroll-view 的元素要加上样式–> overflow:hidden;white-space:nowrap; 5.有时候为了美观要隐藏滚动条,需要在样式里加上 核心代码: 在w

  • 微信小程序实现滚动条功能

    本文实例为大家分享了微信小程序实现滚动条的具体代码,供大家参考,具体内容如下 view <view class="conty">   <!-- 滚动字幕 --> <scroll-view class="container">   <view class="scrolltxt">     <view class="marquee_box">       <view

  • 微信小程序scroll-view的滚动条设置实现

    小程序的scroll-view用的比较多了,列表页一般也没管它的滚动条,最近突然发现在android与ios中横向滑动的时候表现不一样.不一样在哪呢,ios上直接就不显示啊,也是没谁了.深入想了一下,这滚动条能不能换一颜色或者换个样式.有这冲动就立马着手改. 1.直接打开官方demo,仔细看了一遍官方文档,没有任何说明,这是官方文档的一贯作风.没有一个属性是去控制显示/隐藏滚动条,更别说这样式.所以文档是指望不上了. 2.既然是组件,那就是css来控制的.又去看一下css中的scroll的介绍,

  • 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

    一.实践踩坑 项目使用mpvue开发 1. scroll-view默认是不滚动的..所以要先设置scroll-x="true"或者scroll-y="true" 2. 在scroll-view里面添加定宽元素,超过scroll-view宽度(设置了100%,即屏幕宽度)后,它竟然换行了.所以要scroll-view的样式要这样设置: scroll-view { width: 100%; white-space: nowrap; // 不让它换行 } 3. 然后在定宽

  • 微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例

    本文实例讲述了微信小程序实现swiper切换卡内嵌滚动条不显示的方法.分享给大家供大家参考,具体如下: index.wxml文件: <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">为你推荐</view&g

  • 微信小程序-横向滑动scroll-view隐藏滚动条

    wxml <scroll-view class="recommend_scroll_x_box" scroll-x="true"> <view class="recommend_hot_box" wx:for="{{hotList}}"> <image src="{{item.pic}}" class="recommend_hot_image"><

  • 微信小程序实现横向滚动条

    本文实例为大家分享了微信小程序横向滚动条的具体代码,供大家参考,具体内容如下 微信小程序scroll-view实现横向滑动滚动 效果图如下: 左右滑动效果展示如下: 实现代码: index.wxml <view class="hotService">     <view class="hotServiceList_box">     <!-- 这里为滚动的内容部分 -->             <scroll-view c

  • 微信小程序实现横向增长表格的方法

    效果图如下所示: 下面给大家分享微信小程序横向增长表格的实例代码,代码如下所示: <view class='table'> <view class='tr'> <view class='td' wx:for='{{array}}'>{{item.day}}</view> </view> <view class='tr'> <view class='td' wx:for='{{array}}'>{{item.number}}

  • 微信小程序实现横向滚动导航栏效果

    1.page.wx.css内容如下: <view class='classify_list'> <view class="classify">分类1</view> <view class="classify">分类1</view> <view class="classify">分类1</view> <view class="classify&quo

  • 微信小程序scroll-view横向滑动嵌套for循环的示例代码

    1.布局及样式等 (1)xml布局 <view class="container"> <scroll-view scroll-x="true"> <view class="item-content" wx:for="{{list}}" wx:for-item="item"> <view class="title">{{item.title}

  • 微信小程序图片横向左右滑动案例

    本文实例为大家分享了微信小程序图片左右滑动的具体代码,供大家参考,具体内容如下 图片左右滑动效果图: wxml代码: <scroll-view scroll-x="true"> <view class="uploadWrap" scroll-x="true"> <view class="upload_Item"> <image class="upload_Item_img&q

  • 微信小程序实现列表的横向滑动方式

    微信小程序原生方式实现列表的横向滑动的两种方法: 效果图: 方式一:简单样式实现 父元素设置: white-space:nowrap;//不换行 overflow-x: auto;子元素设置: display:inline-block; 方式二:scroll-view 标签 + 样式 scroll-view的横向滚动: scroll-view的内层view元素需要:display:inline-block; scroll-view的外层元素需要:white-space:nowrap; 实现代码:

随机推荐