码迷,mamicode.com
首页 > 微信 > 详细

小程序Tap切换

时间:2020-02-27 19:15:27      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:初始   sha   处理   加载   message   index   lis   pre   NPU   

<!-- Tap切换 -->
  <view class="nav_title">
    <view class="nav_tab">
      <view wx:for="{{list}}" class="{{selected==index?‘hidden‘:‘show‘}}" wx:key="this" data-index=‘{{index}}‘ bindtap="selected">
        {{item}}
        <view class="{{selected==index?‘nav_underline‘:‘‘}}"></view>
      </view>
    </view>

    <!-- tab框显示内容 -->
    <view wx:if="{{selected == 0}}">aaa</view>
    <view wx:if="{{selected == 1}}">bbb</view>
    <view wx:if="{{selected == 2}}">ccc</view>
    <view wx:if="{{selected == 3}}">ddd</view>
  </view>
Page({

  /**
   * 页面的初始数据
   */
  data: {
    selected: 0,
    list: [‘上衣‘, ‘裤子‘, ‘套装‘, ‘女鞋‘],
    
  },
  

 
  selected: function (e) {
    console.log(e)
    let that = this
    let index = e.currentTarget.dataset.index
    console.log(index)
    if (index == 0) {
      that.setData({
        selected: 0
      })
    } else if (index == 1) {
      that.setData({
        selected: 1
      })
    } else if (index == 2) {
      that.setData({
        selected: 2
      })
    } else {
      that.setData({
        selected: 3
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },
  //向下滑动
  onPageScroll: function () {

  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 

小程序Tap切换

标签:初始   sha   处理   加载   message   index   lis   pre   NPU   

原文地址:https://www.cnblogs.com/520yh/p/12373393.html

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