原生微信小程序实现tab切换效果demo

效果图

Wxml

<!-- tab框  -->
<view class="nav_title"><view class="nav_tab"><!-- 如果选中的下表等于当前的索引，就使用active class名，否则class名为common --><view wx:for="{{list}}" wx:key="list" class="{{selected==index?'active':'common'}}" data-index='{{index}}' bindtap="selected">{{item}}<!-- 如果选中的下表等于当前的索引，就添加下划线 -->   <view class="{{selected==index?'nav_underline':''}}"></view></view></view><!-- tab1  --><view wx:if="{{selected == 0}}">内容1</view><!-- tab2 --><view wx:if="{{selected == 1}}">内容2</view><!-- tab3 --><view wx:if="{{selected == 2}}">内容3</view>
</view>

/* 页面背景色 */
page {background: rgba(247, 247, 247, 1);
}.nav_tab {width: 702rpx;margin: 20rpx auto;height: 100rpx;display: flex;background: #fff;border-radius: 10rpx;flex-direction: row;
}
/* 未选中的样式 */
.common {line-height: 100rpx;text-align: center;flex: 1;color: #333;font-size: 28rpx;opacity: 0.5;
}
/* 选中时的样式 */
.active {line-height: 100rpx;text-align: center;color: #ef9ba8;flex: 1;font-size: 28rpx;
}
/* 下划线的样式 */
.nav_underline {background: #ef9ba8;width: 54rpx;height: 6rpx;margin-top: -10rpx;margin-left: 70rpx;border-radius: 8rpx;
}

Page({/*** 页面的初始数据*/data: {selected: 0,list: ['Tab1', 'Tab2', 'Tab3'],},//tab框selected: function (e) {let that = this//console.log(e)let index = e.currentTarget.dataset.index//console.log("index",index)if (index == 0) {that.setData({selected: 0})} else if (index == 1) {that.setData({selected: 1})} else {that.setData({selected: 2})} }

原生微信小程序实现tab切换效果demo相关推荐

微信小程序顶部tab切换以及滑动
效果图图片如下实现代码xml中 <view class="swiper_tab_view"><scroll-view scroll-x='true' scrol ...
微信小程序实现tab切换和吸顶效果
在项目中合理的采用webapp的组件库能够很好的提高我们的开发效率,我们也应该合理的进行运用. 首先我们是对手机的状态栏的代码进行了自定义. 其次就是采用组件库的van-sticky进行吸顶距离计算 ...
原生微信小程序实现中英文切换（内涵Vant Weapp+语言切换完整项目）
一.在 utils 文件夹中新建两个语言包基础库 js 文件 1.Chinese.js //中文语言包 var Chinese = {content:"你好世界",informat ...
原生微信小程序购物车
原生微信小程序购物车!! 效果: html: <view style="background-color: #eeeeee;height: 100vh;"><vi ...
微信小程序点击切换tab跟随动画
微信小程序点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
【微信小程序】---- redux 在原生微信小程序的使用实例
weapp-redux 下载 weapp-redux 使用实例下载预览开发 1. 目标学会 redux 在原生微信小程序的使用: 学习和思考微信小程序中封装 Provider: 2. 引入 re ...

原生微信小程序实现tab切换效果demo

效果图

Wxml

原生微信小程序实现tab切换效果demo相关推荐

最新文章

热门文章