微信小程序:<view>视图的切换显示\隐藏详解(假的两个页面,实际上是通过事件点击进行<view>视图的隐藏和显示的切换)

假的两个页面,实际上是通过事件点击进行<view>视图的隐藏和显示的切换,不是两个WXML之间进行切换而是同一个WXML中有很多个不同的<view>, 比如同一个页面中有"关注"和"发现",   点击"关注"时 ,   "关注"页面显示,   "发现"的页面隐藏,;  点击"发现"时 , "关注"的页面隐藏.

 

如果你有多个<view>想进行显示和隐藏的切换只需要  在点击的地方设置多个"data-index== 'X' ",然后与你想显示的<view>设置判断<view  wx:if="{{TopIndex == X}}">  就行了.

WXML:

<view >

    <view class="top-line">
    <view class="top-line-button {{TopIndex == 0 ? 'active':''}} " data-index="0" 
bindtap='changstyle'>发现</view>
    <view class="top-line-button {{TopIndex == 1 ? 'active':''}} " data-index="1" 
bindtap='changstyle'>关注</view>    /*如果当前view的TopIndex等于当前要显示的view的Index 就触发过度效果*/
    </view>

  <view wx:if="{{TopIndex == 0}}"> 这里是发现</view>
  <view  wx:if="{{TopIndex == 1}}">  这里是关注</view>


</view>

WXSS:

.top-line {
  display: flex;
  flex-flow: row;
}

.top-line-button {
  font-size: 12px;   
  color: #777;
  margin: 5px;
  padding: 10px;
}

.active {                         /*过度效果,就是你点击的时候,当前字体会有什么改变 */
  transform: scale(1.45);
  transform: all 2s;
  border-bottom-style: solid;
  border-bottom-color: #744646;
  border-bottom-width: 2.5px;
  color: #000;
}

JS:

Page({
  data: {
    TopIndex:  0
  },
  changstyle: function(e) {
    let index = e.currentTarget.dataset.index;           /*定义index等于当前页面的dataset.index*/
    this.setData({
      TopIndex: index      /*定义当前数据的TopIndex等于  index 等于dataset.index*/
    })         
  } 
)}

效果: