微信小程序选项卡设置

<view class="menu_box"><text class='menu1 {{menuTapCurrent=="0"?"borders":""}}' data-current="0" catchtap="menuTap">menu1</text><text class='menu2 {{menuTapCurrent=="1"?"borders":""}}' data-current="1" catchtap="menuTap">menu2</text>
</view>
<view class="tab1" hidden="{{menuTapCurrent!='0'}}">tab1</view>
<view class="tab2" hidden="{{menuTapCurrent!='1'}}">tab2</view>

.menu_box{display: flex;height: 80rpx;
}
.menu1,.menu2{flex: 1;font-size:30rpx;line-height: 80rpx;text-align: center;
}
.borders{border-bottom: 4rpx solid #f00;color: #f00;
}
.tab1,.tab2{height: 300rpx;background: #23bff3;
}
.tab2{background: #ccc;
}

 menuTap:function(e){var current=e.currentTarget.dataset.current;//获取到绑定的数据//改变menuTapCurrent的值为当前选中的menu所绑定的数据this.setData({menuTapCurrent:current});},

微信小程序选项卡设置相关推荐

微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...
微信小程序：设置字体跟随手机系统
小程序开发:全局设置跟随手机系统默认字体前言最近在开发一款微信小程序,发现字体不是跟随手机系统设置的字体,这样对用户很不友好,通过下面这行代码,就可以将页面的字体搞成系统默认字体了. 提示:要设置 ...
微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容例如普通用户这里不显示赛事t ...
微信小程序 border设置单边框失效解决办法
微信小程序 border设置单边框失效解决办法遇到的问题解决的方法总结遇到的问题 border-right: 1 rpx solid #ccc;border-bottom: 1 rpx sol ...
微信小程序--动态设置导航栏颜色
微信小程序--动态设置导航栏颜色既然要动态设置导航栏颜色,估计自定义导航栏也跑不了关于动态设置导航栏颜色,微信小程序官方文档给出了一个API: wx.setNavigationBarColor ...
微信小程序动态设置 tabBar
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 使用微信提供的API wx.setTabBarItem(Object object) 动态设置 tabBar ...
微信小程序之设置不同的顶部导航栏名称
一.背景首先是,我们知道在app.json中,有一个window属性,这个规定了全局的顶部导航栏目的显示: "window": {"backgroundTextStyl ...
微信小程序text设置高度_微信小程序字体样式的设置
知识点: 1.常用字体样式属性 2.利用style和class 设置字体样式 3.在app.wxss 和 index.wxss中定义样式常用字体属性: 举列: 项目目录: 运行结果: 在index. ...
uni-app微信小程序动态样式设置；微信小程序style行内式无效；微信小程序style行内式编译报错；微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
微信小程序css设置本地背景图片
微信小程序中,直接在css中直接使用本地图片为view设置背景图片: <style>div{width: 500px;height: 500px;}.box1{background-ima ...

微信小程序选项卡设置

微信小程序选项卡设置相关推荐

最新文章

热门文章

微信小程序 选项卡设置

微信小程序 选项卡设置相关推荐

最新文章

热门文章

微信小程序选项卡设置

微信小程序选项卡设置相关推荐