PHP前端开发

微信小程序实现tab切换效果实例分享

百变鹏仔 4天前 #前端问答
文章标签 实例

本文主要为大家详细介绍了微信小程序实现tab切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

微信小程序之tab切换效果,如图:

最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能)

.wxml代码:


<view> <view>  <view>系统提醒</view>  <view>优惠活动</view> </view> <view>for system</view> <view>for activity</view></view>

.wxss代码:


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

.js代码:


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