Sharing examples of WeChat applet realizing tab switching effect-Mini Program Development-php.cn

Sharing examples of WeChat applet realizing tab switching effect

小云云

Release： 2018-01-16 10:01:55

Original

3277 people have browsed it

This article mainly introduces the tab switching effect of WeChat applet in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The tab switching effect of the WeChat mini program, as shown in the picture:

Recently I am learning the WeChat mini program and moved the previous company app to the mini program. Pick some implementation effects and record them (mainly things that are not mentioned in the official documents, after all, the official documents only introduce functions)

.wxml code:

<view class="body">
 <view class="nav bc_white">
  <view class="{{selected?&#39;red&#39;:&#39;default&#39;}}" bindtap="selected">系统提醒</view>
  <view class="{{selected1?&#39;red&#39;:&#39;default&#39;}}" bindtap="selected1">优惠活动</view>
 </view>
 <view class="{{selected?&#39;show&#39;:&#39;hidden&#39;}}">for system</view>
 <view class="{{selected1?&#39;show&#39;:&#39;hidden&#39;}}">for activity</view>
</view>

Copy after login

.wxss code:

page{background-color:#edf0f3;}
.nav{width:100%;height:100rpx;display:flex;flex-direction:row;}
.default{line-height:100rpx;text-align:center;flex:1;border-right:1px solid gainsboro;color:#000;font-weight:bold;font-size:28rpx;}
.red{line-height:100rpx;text-align:center;color:#fc5558;flex:1;border-right:1px solid gainsboro;font-weight:bold;font-size:28rpx;}
.show{display:block;text-align:center;line-height:200rpx;}
.hidden{display:none;text-align:center;line-height:200px;}

Copy after login

.js code:

Page({
  data:{
    selected:true,
    selected1:false
    },
  selected:function(e){
    this.setData({
      selected1:false,
      selected:true
    })
  },
  selected1:function(e){
    this.setData({
      selected:false,
      selected1:true
    })
  }
})

Copy after login

Related Recommended:

Example details the tab switching effect of vue imitating Taobao order status

Commonly used tab switching effect in js

jquery image tab switching effect_jquery

The above is the detailed content of Sharing examples of WeChat applet realizing tab switching effect. For more information, please follow other related articles on the PHP Chinese website!