微信小程序选项卡、列表动态显示按钮

最新推荐文章于 2023-05-26 08:58:12 发布

岩崎理奈

最新推荐文章于 2023-05-26 08:58:12 发布

阅读量5.9k

点赞数 1

分类专栏：微信小程序笔记

本文链接：https://blog.csdn.net/qq_41874847/article/details/84965717

版权

本文介绍了微信小程序中实现选项卡功能的两种方法，一种使用swiper组件结合wxss和js，通过data和class动态显示，另一种是直接通过赋值和条件判断控制选项卡显示。同时讲解了动态显示按钮的实现，利用wx:if控制元素显示，并在接口调用成功后通过onLoad或onShow刷新页面更新按钮状态。

摘要由CSDN通过智能技术生成

小程序选项卡功能实现

wxml页面：

先给选项卡赋值data-current=“待确认” 添加点击事件bindtap=“clickTab”，在js里clickTab获取选项卡的值，e.target.dataset.current 通过that.setData赋值给currentTab，在wxml 选项卡class里进行判断{ {currentTab==‘待确认’?‘active’:’’}}，通过 js 调用接口赋值来判断选项卡列表状态。

因为swiper高度是固定的，所以用到style=‘height:{ {scrollHeight}}px’ bindchange=“swiperTab”，在js onLoad方法里通过this.setData 设置高scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100)

<view class="swiper-tab">
    <view class="swiper-tab-item {
  {currentTab=='待确认'?'active':''}}" data-current="待确认" bindtap="clickTab">待确认   </view>
    <view class="swiper-tab-item {
  {currentTab=='运输中'?'active':''}}" data-current="运输中" bindtap="clickTab">运输中         </view>
    <view class="swiper-tab-item {
  {currentTab=='待结算'?'active':''}}" data-current="待结算" bindtap="clickTab">待结算          </view>
    <view class="swiper-tab-item {
  {currentTab=='已完成'?'active':''}}" data-current="已完成" bindtap="clickTab">已完成          </view>
    <view class="swiper-tab-item {
  {currentTab=='已取消'?'active':''}}" data-current="已取消" bindtap="clickTab">已取消         </view>
  </view>
    <swiper current='{
  {currentTab}}' style='height:{
  {scrollHeight}}px' duration="300" bindchange="swiperTab">

    <!-- 待确认 -->
    //在这里我设置了禁止滑动（catchtouchmove='stopTouchMove'）
      <swiper-item catchtouchmove='stopTouchMove'><scroll-view  scroll-y style='height:{
  {scrollHeight}}px' ><view class="main" wx:for='{
  {myReceive}}' wx:key="item">
      <view data-order-no="{
  {item.orderNo}}"  bindtap="clickOrder">
        <view class="main-item">
          <view class="flex-row th">发单人:</view> 
          <view class="flex-row td2">{
  {item.publisherName}}</view> 
          <view class="flex-row th1">箱型:</view> 
          <view class="flex-row td1" style="color:red">{
  {item.boxType}}</view> 
        </view>
        <view class="main-item">
          <vi