码迷,mamicode.com
首页 > 其他好文 > 详细

横向滚动菜单-选中标题居中显示

时间:2018-12-25 11:25:24      阅读:736      评论:0      收藏:0      [点我收藏+]

标签:show   ndt   滑动   遇到   实现   data-   .data   menu   black   

很多时候我们都会遇到这种需求,在移动端端显示导航栏横向内滚动,可以左右滑动,同时将选中的目标元素居中显示。那我们该如何去实现呢,不管是APP,移动端段网页还是小程序,其原理都是相同的,接下来我就拿小程序举个例子,先画个图解释下:

技术分享图片

 

具体步骤:

1.获取当前设备的宽度

 onShow: function () {
    // 获取当前设备的宽度
    this.setData({
      deviceWidth: wx.getSystemInfoSync().windowWidth
    })
  },

2.获取当前元素的宽度以及距离父元素左边的距离offsetleft

  onMove:function(e){
    // 创建节点
    var query = wx.createSelectorQuery();
    //选择id
    var that = this;
    var width = 0
    // 获取当前点击元素的宽度
    query.select(‘#item_‘ + e.currentTarget.dataset.index).boundingClientRect(function (rect) {
      width = rect.width;
      // 激活当前选中项
      that.data.tabmenu.forEach(function (element, index) {
        element.active = false
        if (e.currentTarget.dataset.index == index) {
          element.active = true
        }
      })
      that.setData({
        tabmenu: that.data.tabmenu,
        // 设置选中元素居中显示
        scrollLeft: e.currentTarget.offsetLeft + (width / 2 - that.data.deviceWidth / 2)
      })
    }).exec();
    
  },

3.设置选中元素居中

JS:

scrollLeft: e.currentTarget.offsetLeft + (width / 2 - that.data.deviceWidth / 2)

wxml:

<!-- 标题栏 -->
      <scroll-view class="scroll-view_H" id="scroll-view_H" bindscroll="onScroll" scroll-left="{{scrollLeft}}" scroll-with-animation scroll-x="true">
        <block wx:for="{{tabmenu}}" wx:key="{{index}}">
          <view class="scroll-view-item_H {{item.active?‘active‘:‘‘}} " id="item_{{index}}" data-index="{{index}}" bindtap=‘onMove‘>{{item.name}}</view>
        </block>
      </scroll-view>

data数据

    tabmenu:[{
      name: ‘Html‘,
      active: true
    }, {
      name: ‘CSS‘,
      active: false
    }, {
      name: ‘Javascript‘,
      active: false
    }, {
      name: ‘Es6‘,
      active: false
    }, {
      name: ‘Vue‘,
      active: false
    }]

效果图如下:

技术分享图片

 

横向滚动菜单-选中标题居中显示

标签:show   ndt   滑动   遇到   实现   data-   .data   menu   black   

原文地址:https://www.cnblogs.com/liruoruo/p/10172350.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!