微信小程序weui在线入门教程-WeUi导航相关-navbar

 data: {

    tabs: ["选项一", "选项二", "选项三"],

    activeIndex: 1,

    sliderOffset: 0,

    sliderLeft: 0

  },

  onLoad: function () {

    var that = this;

    wx.getSystemInfo({

      success: function (res) {

        that.setData({

          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,

          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex

        });

      }

    });

  },

  tabClick: function (e) {

    this.setData({

      sliderOffset: e.currentTarget.offsetLeft,

      activeIndex: e.currentTarget.id

    });

  },

<view class="page">

  <view class="page__bd">

    <view class="weui-tab">

      <view class="weui-navbar">

        <block wx:for="{{tabs}}" wx:key="*this">

          <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">

            <view class="weui-navbar__title">{{item}}</view>

          </view>

        </block>

        <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>

      </view>

      <view class="weui-tab__panel">

        <view class="weui-tab__content" hidden="{{activeIndex != 0}}">选项一的内容</view>

        <view class="weui-tab__content" hidden="{{activeIndex != 1}}">选项二的内容</view>

        <view class="weui-tab__content" hidden="{{activeIndex != 2}}">选项三的内容</view>

      </view>

    </view>

  </view>

</view>