uniapp点击选项卡更改背景颜色

HTML

<view style="margin-top: 80rpx;height: 100vh;" :style="{backgroundColor: bgColor    }"></view>

JS

<script>
export defalut{
  data(){
    retrun {
     bgColor:""
  }
  },
methods:{
changeTabs(){
 switch (this.tabsCurrt) {
					case 0:
						this.bgColor = '#f0f3f8'
						break;
					case 1:
						this.bgColor = '#1d1e23'
						break;
					case 2:
						this.bgColor = '#1d1e23'
						break;
				}
}
}
}
</script>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果你想实现点击选项卡切换加上分类选项卡内容的功能,可以使用uniapp提供的tabBar组件和swiper组件。 首先,你需要在页面中引入tabbar组件和swiper组件: ```html <template> <view> <tabbar :current="current" @change="tabChange"> <tabbar-item title="选项卡1"></tabbar-item> <tabbar-item title="选项卡2"></tabbar-item> <tabbar-item title="选项卡3"></tabbar-item> </tabbar> <swiper :current="current" @change="swiperChange"> <swiper-item> <view>选项卡1对应的内容</view> </swiper-item> <swiper-item> <view>选项卡2对应的内容</view> </swiper-item> <swiper-item> <view>选项卡3对应的内容</view> </swiper-item> </swiper> </view> </template> ``` 在上面的代码中,我们创建了一个tabbar组件和一个swiper组件,分别用来实现选项卡和对应内容的切换。其中,tabbar组件的每个选项卡都有一个title属性,用来显示选项卡的标题。swiper组件的每个swiper-item元素都包含一个view元素,用来显示对应选项卡的内容。 接下来,你需要在页面的<script>标签中添加对应的逻辑代码,用来实现选项卡和内容的切换: ```javascript <script> export default { data() { return { current: 0 } }, methods: { tabChange(e) { this.current = e.index }, swiperChange(e) { this.current = e.current } } } </script> ``` 在上面的代码中,我们定义了一个current变量,用来记录当前选中的选项卡的索引值。然后,我们在tabChange方法和swiperChange方法中分别监听tabbar和swiper的切换事件,通过修改current变量的值来实现选项卡和内容的切换。 这样,你就可以通过uniapp提供的tabbar组件和swiper组件来实现点击选项卡切换加上分类选项卡内容的功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值