小程序实现左右分页动态改变横向滚动位置

timg.jpg

直接看效果图

image.png

image.png

image.png

image.png

1.首先需要用到scroll-view，因为数据量比较大默认一页只展示一部分数据

2.需要设置位横向滚动，所以需要在scroll-view上设置为scroll-x

3.因为需要动态改变滚动距离，所以需要设置scroll-left

4.数据量不同，页数页不同，需要做循环遍历出来页数进行动态赋值

5.默认页数应该为1，高亮显示，需要在加载所有页的时候通过js设置背景色和前景色并且判断如果是默认页设置蓝色背景和白色前景，其他页数全部置空为白色

6.当点击某一页通过下标动态改变颜色

具体请看代码

xml

 <!-- flagPro: false, //默认隐藏 -->
 <!-- product_handlePre:左边箭头触发事件 -->
 <!-- product_handleNext:右边箭头触发事件 -->
 <!-- scroll-x：设置为横向滚动 -->
 <!-- scroll-left：改变横向距离，需要配合事件bindscrolltolower和bindscroll -->
 <!-- scroll-x：设置为横向滚动 -->
 <!-- scroll-x：设置为横向滚动 -->
 <!-- scroll-x：设置为横向滚动 -->
 <!-- scroll-x：设置为横向滚动 -->
    <view class='content-box' wx:if='{{flagPro}}'>
      <view class='content-left-img' bindtap='product_handlePre'>
        <image src='../../images/left.png'></image>
      </view>
      <scroll-view class='scroll_parent' scroll-x scroll-left="{{product_leftScrollDistance}}" bindscrolltolower="handleRight" bindscroll="handleScroll">
        <block wx:for='{{product_numList}}' wx:key='this'>
          <view class='scroll_son'>
            <view class='content-num' data-num='{{item.id}}' style="{{product_showstyle[index]}}" bindtap="product_xuanzeye">{{item.id}}</view>
          </view>
        </block>
      </scroll-view>
      <view class='content-right-img' bindtap='product_handleNext'>
        <image src='../../images/right.png'></image>
      </view>
    </view>

xss

/* -------左右翻页--------- */
/* 最外边按钮盒子 */
.content-box{
 width: 80%;
  height: 80rpx;
  /* border: 1px solid red; */
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
}
.scroll_parent{
  width: 70%;
  height: 50rpx;
  white-space: nowrap;
  /* border: 1px solid orange; */
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-content: center;
}
.scroll_son{
  display: inline-block;
  width: 90rpx;
  height: 45rpx;
  /* border: 1px solid greenyellow; */
}
.content-num{
  width: 40rpx;
  height: 40rpx;
  text-align: center;
  line-height: 40rpx;
  border-radius: 10rpx;
  font-size: 26rpx;
 
}

.content-left-img{
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  /* border: 1px solid red; */
}
.content-right-img{
  width: 30rpx;
  height: 30rpx;
  /* border: 1px solid red; */
  line-height: 30rpx;
}
.content-left-img>image{
  width: 100%;
  height: 100%;
}
.content-right-img>image{
  width: 100%;
  height: 100%;
}

/* ----------end----------- */

js

Page({
  data:{
    page:1,
    productList: [],  //数据
    product_numList: [], //页数
    flagPro: false, //默认隐藏
    product_showstyle: [],  //存放背景色和颜色
    product_leftScrollDistance: 0, //动态修改向左滚动的距离  
  }
})
 // 这里很重要，默认加载可视区域的页数，类似懒加载，当你向右滑动时动态朱家5页，无论数据量有多大都不会影响性能，否则页数太多直接循环渲染会导致小程序卡死
  handleSelect1() {
    var that = this
    that.handleSelect(1)
    var array = new Array()
    for (var i = 0; i < 5; i++) {
      array.push({
        id: i + 1
      })
    }
    that.getFool(array)
  },
// 滚动时触发
  handleScroll(e){
    var that = this
    console.log(e.detail.scrollLeft)
      that.setData({
        product_leftScrollDistance: e.detail.scrollLeft  //获取滚动距离
      })
  },
 // 滚动到右边触发
  handleRight: function() {
    var that = this
    var product_leftScrollDistance = that.data.product_leftScrollDistance
    console.log(product_leftScrollDistance)
    var product_numList = that.data.product_numList  //获取页数
    var lastNum = parseInt(product_numList[product_numList.length - 1].id)
    var startNum = lastNum - 0 + 1
    var lastNum1 = lastNum - 0 + 5
    for (var i = startNum; i <= lastNum1; i++) {
      product_numList.push({
        id: i
      })
    }
    console.log(product_numList)
    that.setData({
      product_numList: product_numList
    })
    // 动态改变位置
    if (product_numList.length <= 10 && that.data.page == 2) {
      product_leftScrollDistance = 37
    } 
    that.setData({
      product_leftScrollDistance: product_leftScrollDistance
    })
  },
getFool(product_numList) {
    console.log(product_numList)
    var that = this
    that.setData({
      product_numList: product_numList
    })
    // 产品 
    var product_showstyle = []
    for (var i in product_numList) {
      if (i == 0) {
        product_showstyle.push("background: #1E8FFF !important;color: #fff;")
      } else {
        product_showstyle.push("background: #fff;")
      }
      that.setData({
        product_showstyle: product_showstyle,
      })
    }
  },
 // 触发产品
  product_xuanzeye: function(e) {
    var that = this
    var num = parseInt(e.target.dataset.num)
    that.handleSelect(num)
    var product_showstyle = []
    for (var i in that.data.product_numList) {
      product_showstyle.push("background: #fff;")
    }
    product_showstyle[num - 1] = "background: #1E8FFF !important;color: #fff;"
    that.setData({
      product_showstyle: product_showstyle,
      page: num,
    })
  },
//产品上一页
  product_handlePre: function() {
    var that = this
    var defNum = that.data.page
    var product_showstyle = []
    if (defNum == 1) {
      wx.showToast({
        title: '已经是第一页了',
      })
    } else {
      defNum -= 1
      that.handleSelect(defNum)
      for (var i in that.data.product_numList) {
        product_showstyle.push("background: #fff;")
      }
      product_showstyle[defNum - 1] = "background: #1E8FFF !important;color: #fff;"

      that.setData({
        product_leftScrollDistance: that.data.product_leftScrollDistance -= 35,
        page: defNum,
        product_showstyle: product_showstyle,
      })

    }
  },
  // 产品下一页
  product_handleNext: function() {
    var that = this
    var defNum = that.data.page
    var product_showstyle = []
    if (defNum >= that.data.product_numList.length) {
      wx.showToast({
        title: '已经是最后一页了',
      })
    } else {
      defNum += 1
      that.handleSelect(defNum)
      for (var i in that.data.product_numList) {
        product_showstyle.push("background: #fff;")
      }
      product_showstyle[defNum - 1] = "background: #1E8FFF !important;color: #fff;"
      var product_leftScrollDistance = 0
      console.log(defNum)
      if(defNum <= 2){
        product_leftScrollDistance =37
      }else{
        product_leftScrollDistance = that.data.product_leftScrollDistance - 0 + 35
      }
      console.log(product_leftScrollDistance)
      that.setData({
        product_leftScrollDistance: product_leftScrollDistance,
        page: defNum,
        product_showstyle: product_showstyle,
      })
        
    }
  },

注意：

1.分页背景色和前景色根据需求可以自定义

2.动态滚动的距离根据实际需求可以自定义

3.可是区域我默认为显示5个，根据需求可以自定义

本次分享就到这里，喜欢的小伙伴欢迎关注支持，后续会带来更多精彩