技术不行但人小帅 2023-02-16 00:18 采纳率: 60.6%
浏览 36
已结题

uniapp 微信小程序如何切换组件?

页面大概分为上中下三部分
下部分是底部导航栏,共有四个导航,
微信小程序不允许使用动态切换组件 coponents :is这样的写法,
自己使用v-if 选择底部导航栏的渲染和隐藏,
每次点击目标导航时 其他三个导航都要设置为false,这样既浪费性能,渲染的慢 代码又不规范,开发经验不是很足,请问如何点击导航时切换组件?

  • 写回答

3条回答 默认 最新

  • Monster-XH 2023-02-16 00:33
    关注

    基于Monster 组和GPT的调写:
    微信小程序不允许使用动态切换组件的写法,但是可以通过使用条件渲染 wx:if 或者 hidden 来实现点击导航时切换组件的效果,而不需要每次都重新渲染所有导航。

    你可以为每个导航设置一个状态变量,然后在导航被点击时将该变量设为 true,同时将其他导航的状态变量设为 false,以此来切换底部导航栏的组件。

    例如,可以在底部导航栏的组件中定义一个 selectedTab 变量来表示当前选中的导航,然后在点击导航时设置这个变量的值,如下所示:

    <view class="tab-bar">
      <view class="tab" wx:if="{{selectedTab === 'home'}}" >
        <!-- Home Tab Content -->
      </view>
      <view class="tab" wx:if="{{selectedTab === 'discover'}}" >
        <!-- Discover Tab Content -->
      </view>
      <view class="tab" wx:if="{{selectedTab === 'cart'}}" >
        <!-- Cart Tab Content -->
      </view>
      <view class="tab" wx:if="{{selectedTab === 'profile'}}" >
        <!-- Profile Tab Content -->
      </view>
    </view>
    
    
    
    

    然后在点击导航时,使用 setData 方法更新 selectedTab 的值,如下所示:

    data: {
      selectedTab: 'home' // 默认选中的导航
    },
    onTabClick(event) {
      const tab = event.currentTarget.dataset.tab // 获取当前点击的导航
      this.setData({
        selectedTab: tab // 更新选中的导航
      })
    }
    
    
    

    这样每次点击导航时,只会重新渲染当前选中的导航组件,而其他导航组件则会被隐藏,从而避免了不必要的性能浪费和渲染速度慢的问题。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • GISer Liu 2023-02-16 09:10
    关注

    以下答案引用自GPT-3大模型,请合理使用:

    这里建议使用 swiper 组件来实现切换功能:
    
    
    <view class="page-bottom"><view class="page-bottom-item"></view><view class="page-bottom-item"></view><view class="page-bottom-item"></view><view class="page-bottom-item"></view></view>
    
    

    如果我的回答解决了您的问题,请采纳我的回答

    评论
  • CSDN-Ada助手 CSDN-AI 官方账号 2023-02-16 16:37
    关注
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 2月24日
  • 已采纳回答 2月16日
  • 创建了问题 2月16日

悬赏问题

  • ¥15 k210显示failed init to model
  • ¥15 Evil-droid生成的APK手机已经下载但无法建立任务
  • ¥25 c语言韩信点兵的变式
  • ¥15 怎么根据书上的例子完成这个问题呢?
  • ¥15 ECharts 增加Zoom,整行包括右边的Text一起滑动
  • ¥15 关于网上一个easyx制作的见缝插针小游戏(c++)
  • ¥15 开地址法双散列函数处理碰撞
  • ¥15 想问一下这个是什么情况 虚拟机Linux打不开了
  • ¥15 联通光猫掉注册了怎么重新注册上去
  • ¥15 关于unity开发steamvr程序遇到的问题