用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

小程序导航栏选择每一项居中(scroll-view)

Rolan 2019-11-14 00:41

前言在项目中遇到点击scroll-view中每一项使其居中,查看文档后发现有scroll-view有属性scroll-into-view可以根据id来定位每一项,但是无法居中,于是我想到了使用scroll-left来计算滚动距离是使一项居中.查看效果完 ...

前言

在项目中遇到点击scroll-view中每一项使其居中,查看文档后发现有scroll-view有属性scroll-into-view可以根据id来定位每一项,但是无法居中,于是我想到了使用scroll-left来计算滚动距离是使一项居中.

查看效果

完成思路

  1. 获取屏幕宽度的一半(srceenHalfWidth)
  2. 获取元素宽度的一半(即subHalfWidth)
  3. 获取元素到手机屏幕左边的距离(即元素的subLeft)
  4. 计算scroll-view需要滚动的距离:needScroll = subLeft - srceenHalfWidth + subHalfWidth
  5. 监听scroll-view滚动获取上次滚动的距离(prevDistance)
  6. 计算scroll-left属性的值 scroll-left= needScroll + prevDistance

wxml代码

<scroll-view class="power-view" scroll-x="true" scroll-with-animation="true" scroll-left="{{scrollLeft}}" bindscroll="scrollMove">
    <block wx:for="{{powerList}}" wx:key>

        <view class="item {{index == activeIdx?'active':''}}" bindtap="chooseSub" id="v{{index}}" data-index="{{index}}">
          <view class="icon"></view>
          <view class="text">全年海量优惠</view>
        </view>

    </block>

  </scroll-view>复制代码

js代码

data: {
    powerList: ['v1', 'v2', 'v3', 'v4', 'v5', 'v6', 'v7', 'v8', 'v9', 'v10', 'v11', 'v12'],
    activeIdx: 0, //选中的index
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    let scrollInfo = {
      prevDistance: 0, //滚动条的距离(默认为0)
      screenHalfwidth: wx.getSystemInfoSync().windowWidth / 2, 
    }

    this.data.scrollInfo = scrollInfo; 

  },

  //选择某一项类目
  chooseSub: function(e) {

    let index = e.currentTarget.dataset.index;

    this.setData({
      activeIdx: index
    })
    this.getRect(index);
  },

  //获取类目的宽高
  getRect: function (index) {

    let that = this;
    let query = wx.createSelectorQuery();
    query.select("#v" + index).boundingClientRect(function (rect) {

      that.data.scrollInfo.subLeft = rect.left; //元素一半宽度
      that.data.scrollInfo.subHalfWidth = rect.width / 2; 

      that.moveTo();
    }).exec()

  },

  //移动导航栏
  moveTo: function() {
    let subLeft = this.data.scrollInfo.subLeft;
    let subHalfWidth = this.data.scrollInfo.subHalfWidth;
    let prevDistance = this.data.scrollInfo.prevDistance;
    let screenHalfwidth = this.data.scrollInfo.screenHalfwidth;

    let needScroll = subLeft - screenHalfwidth + subHalfWidth;
    let scrollLeft = needScroll + prevDistance;

    this.setData({
      scrollLeft: scrollLeft
    })
  },

  //记录滚动的距离
  scrollMove: function(e) {

    let distance = e.detail.scrollLeft;
    this.data.scrollInfo.prevDistance = distance
  },复制代码

结尾

有两种特殊情况

  1. 当scroll-left < 0,scroll-view会滚动到 scroll-left = 0;
  2. 当scroll-left > maxScroll,scroll-view会滚动到 scroll-left = maxScroll;

所以还是正常运行.


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 阳光宅男酱 来自: 掘金