小程序——Tab切换

爱被打了一巴掌 2021-09-30 08:52 418阅读 0赞
  1. <view class="body">
  2. <view class="nav bc_white">
  3. <view class="{
  4. {selected?'red':'default'}}" bindtap="selected">系统提醒</view>
  5. <view class="{
  6. {selected1?'red':'default'}}" bindtap="selected1">优惠活动</view>
  7. <view class="{
  8. {selected2?'red':'default'}}" bindtap="selected2">123</view>
  9. </view>
  10. <view class="{
  11. {selected?'show':'hidden'}}">for system</view>
  12. <view class="{
  13. {selected1?'show':'hidden'}}">for activity</view>
  14. <view class="{
  15. {selected2?'show':'hidden'}}">for activsadity</view>
  16. </view>

WSS

  1. page {
  2. background-color: rgb(243,243,243);
  3. }
  4. .nav {
  5. width: 100%;
  6. height: 80rpx;
  7. display: flex;
  8. flex-direction: row;
  9. background: #fff;
  10. justify-content: space-around;
  11. }
  12. .nav view {
  13. width: 180rpx;
  14. text-align: center;
  15. }
  16. .default {
  17. line-height: 80rpx;
  18. text-align: center;
  19. color: #000;
  20. font-weight: bold;
  21. font-size: 30rpx;
  22. }
  23. .red {
  24. line-height: 80rpx;
  25. text-align: center;
  26. color: rgb(0, 192, 10);
  27. font-weight: bold;
  28. font-size: 30rpx;
  29. border-bottom: 4rpx solid rgb(0, 192, 10);
  30. }
  31. .show {
  32. display: block;
  33. text-align: center;
  34. }
  35. .hidden {
  36. display: none;
  37. text-align: center;
  38. }

JS

  1. data: {
  2. selected: true,
  3. selected1: false
  4. },
  5. selected: function (e) {
  6. this.setData({
  7. selected1: false,
  8. selected2: false,
  9. selected: true
  10. })
  11. },
  12. selected1: function (e) {
  13. this.setData({
  14. selected: false,
  15. selected2: false,
  16. selected1: true
  17. })
  18. },
  19. selected2: function (e) {
  20. this.setData({
  21. selected: false,
  22. selected2: true,
  23. selected1: false
  24. })
  25. },

转载于:https://www.cnblogs.com/wangshishuai/p/9844543.html

发表评论

表情:
评论列表 (有 0 条评论,418人围观)

还没有评论,来说两句吧...

相关阅读