微信Weui教程

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

时间:2019/1/13 12:01:01  作者:互联网  来源:网络转载  查看:13979  评论:0
内容摘要:效果图js代码 data: {    tabs: ["选项一", "选项二", "选项三"],    activeIndex: 1, &nb...
效果图
微信小程序weui在线入门教程-WeUi导航相关-navbar

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

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

js代码

 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

    });

  },


wxml代码

<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>




欢迎大家学习我的视频课程:微信小程序-WeUI界面布局设计入门到精通
  Weui项目的引用


相关评论
评论者:      验证码:  点击获取验证码
本类推荐
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |