微信小程序tab切换页面

关于微信小程序tab-bar切换页面的问题

千次阅读

2020-07-09 09:14:36

			使用微信小程序的tab-bar带来一个算不上bug的影响

    tab-bar常用作微信小程序中切换页面。常见首页页面下面有“首页”，“详情”，“我的”三个按钮。我们点击按钮实现跳转到按钮相对应的页面。其中我们利用tab-bar中的wx.switchTab来实现无刷新跳转。这种方法跳转的好处就是不会去刷新页面，比如利用下面的“详情”按钮切换到详情页，详情页不会去刷新。因为详情页在进入小程序时已经加载完了。所以此时按钮切换既不会触发onShow(),也不会触发onLoad()
    问题如下：如果我详情页中存在一个tab切换内容，那我tab切换的选中内容不会随着重新进到详情页进行刷新
    解决办法：使用wx.reLaunch跳转到详情页，这种方法下执行onLoad和onShow方法。
    使用wx.reLaunch带来的后果：详情页会刷新，会造成页面卡顿，加载慢。
    所以我觉得是否要使用这个reLaunch方法还是得沟通一下，毕竟如果详情页东西比较多，重新进入一个页面，必然会有一些卡顿

更多相关内容

微信小程序实现tab页面切换功能
2020-10-18 09:00:45

主要介绍了微信小程序实现tab页面切换功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

收起
微信小程序 Tab页切换更新数据
2020-11-30 09:52:21

微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段，最不方便的莫过于官方在不停的更新，前几天写的功能隔个几天忽然发现不能用了_(:зゝ∠)_ 功能需求如下：我在首页点击“5万以上”他会把跳转到买车页然后...

收起
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2020-11-30 22:24:43

看到今日头条小程序页面可以滑动切换，而且tab导航条也会跟着滚动，点击tab导航，页面滑动，切导航栏也会跟着滚动，就想着要怎么实现这个功能像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多，我...

收起
微信小程序实现tab左右切换效果
2020-10-18 01:16:28

主要为大家详细介绍了微信小程序实现tab左右切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起
微信小程序实现tab切换效果
2020-08-28 19:29:38

主要为大家详细介绍了微信小程序实现tab切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起

微信小程序tab页面切换

2022-01-11 10:02:40

html 页面 <view class="bgwhite"> <scroll-view scroll-x="true"> <view class="width100 row nowrap"> <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 0 ? 'topic' : ''}}" ...

在这里插入图片描述
html 页面

<view class="bgwhite">
    <scroll-view scroll-x="true">
        <view class="width100 row nowrap">
            <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 0 ? 'topic' : ''}}" data-current="0" bindtap='checkCurrent'>第1题</view>
            <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 1 ? 'topic' : ''}}" data-current="1" bindtap='checkCurrent'>第2题</view>
            <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 2 ? 'topic' : ''}}" data-current="2" bindtap='checkCurrent'>第3题</view>
            <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 3 ? 'topic' : ''}}" data-current="3" bindtap='checkCurrent'>第4题</view>
            <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 4 ? 'topic' : ''}}" data-current="4" bindtap='checkCurrent'>第5题</view>
            <view class="f32 c666 p-tb-20 p-lr-30 {{currentData == 5 ? 'topic' : ''}}" data-current="5" bindtap='checkCurrent'>第6题</view>
        </view>
    </scroll-view>
</view>
<swiper current="{{currentData}}" class='width100' style="height:600px;" duration="300" bindchange="bindchange">
    <swiper-item>
        <view class="m-lr-20">
            <view class="row p-t-30 p-b-10">
                <view class="radio_singel f22 p-lr-10">单选</view>
                <view class="m-l-20 weight500 f28">题目1</view>
            </view>
            <radio-group bindchange="radioChange">
                <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
                <view class="weui-cell__hd">
                    <radio checked="true" color="#1989f9"/>
                </view>
                <view class="f30 weight500 m-l-10">A、1111</view>
                </label>
                <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
                <view class="weui-cell__hd">
                    <radio color="#1989f9"/>
                </view>
                <view class="f30 weight500 m-l-10">B、2222</view>
                </label>
                <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
                <view class="weui-cell__hd">
                    <radio color="#1989f9"/>
                </view>
                <view class="f30 weight500 m-l-10">C、3333</view>
                </label>
                <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
                <view class="weui-cell__hd">
                    <radio color="#1989f9"/>
                </view>
                <view class="f30 weight500 m-l-10">D、4444</view>
                </label>
            </radio-group>
        </view>
    </swiper-item>
    <swiper-item>
        <view class="m-lr-20">
            <view class="row p-t-30 p-b-10">
                <view class="radio_singel f22 p-lr-10">单选</view>
                <view class="m-l-20 weight500 f28">题目2</view>
            </view>
            <video src="" style="width:100%;"></video>
            <radio-group bindchange="radioChange">
                <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
                <view class="weui-cell__hd">
                    <radio checked="true" color="#1989f9"/>
                </view>
                <view class="f30 weight500 m-l-10">A、1111</view>
                </label>
                <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
                <view class="weui-cell__hd">
                    <radio color="#1989f9"/>
                </view>
                <view class="f30 weight500 m-l-10">B、2222</view>
                </label>
                <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
                <view class="weui-cell__hd">
                    <radio color="#1989f9"/>
                </view>
                <view class="f30 weight500 m-l-10">C、3333</view>
                </label>
                <label class="row alignitems bgwhite p-tb-25 p-lr-20 radius15 m-t-20">
                <view class="weui-cell__hd">
                    <radio color="#1989f9"/>
                </view>
                <view class="f30 weight500 m-l-10">D、4444</view>
                </label>
            </radio-group>
        </view>
    </swiper-item>
    <swiper-item>
    </swiper-item>
    <swiper-item>
    </swiper-item>
    <swiper-item>
    </swiper-item>
</swiper>

<view class="footer p-tb-25">
    <view class="m-lr-30 row just-btw">
        <view class="row alignitems" bindtap="prevClick">
            <image src="../../images/prev_icon.png" mode="aspectFit" style="width:48rpx;height:42rpx;"></image>
            <view class="f36 weight500 m-l-10">上一题</view>
        </view>
        <view class="jiaojuanbtn f30 white p-tb-20">交卷</view>
        <view class="row alignitems" bindtap="nextClick">
            <view class="f36 weight500 m-r-10">下一题</view>
            <image src="../../images/next_icon.png" mode="aspectFit" style="width:48rpx;height:42rpx;"></image>
        </view>
    </view>
</view>

css样式

.topic{
    position: relative;
    color:#000;
}
.topic::before{
    position: absolute;
    content:"";
    width:80rpx;
    height:6rpx;
    background: #1989f9;
    border-radius: 20rpx;
    bottom: 0;
    left:50%;
    transform: translateX(-50%);
}
.radio_singel{
    background: #e6f7ff;
    border:1px solid #91d4fe;
    color:#1890ff;
}
.footer{
    position: fixed;
    bottom: 0;
    background-color: #fff;
    left:0;
    right:0;
}

js 页面

	data: {
        currentData:0,
    },
	//获取当前滑块的index
    bindchange(e){
        const that  = this;
        that.setData({
            currentData: e.detail.current
        })
    },
    //点击切换，滑块index赋值
    checkCurrent(e){
        const that = this;

        if (that.data.currentData === e.target.dataset.current){
            return false;
        }else{
            that.setData({
                currentData: e.target.dataset.current
            })
        }
    },
    //上一题
    prevClick(){
        var currentData = this.data.currentData - 1
        if(currentData + 1 == 0){
            wx.showToast({
              title: '这是第1题了',
            })
        }else{
            this.setData({
                currentData:currentData
            })
        }
    },
    //下一题
    nextClick(){
        this.setData({
            currentData:this.data.currentData + 1
        })
    },

收起

展开全文

javascript css3

微信小程序滚动Tab实现左右可滑动切换
2020-08-29 16:24:09

主要介绍了微信小程序滚动Tab实现左右可滑动切换的相关资料,这里提供实现实例帮助大家实现这样的功能，需要的朋友可以参考下

收起
微信小程序-微信小程序的多tab实现
2019-08-06 03:35:28

tab之间的切换逻辑已处理. 使用时需要做的: 拷贝 netUtil.js拷贝到utils目录下 lib文件夹拷贝到根目录下修改针对具体项目微调netUtil里的一些字段,比如将用于分批加载的pagesize和pageIndex改成自己网络请求里的...

收起
微信小程序 swiper制作tab切换实现附
2020-12-29 02:04:43

微信小程序 swiper制作tab切换 实现效果图： swiper制作tab切换 index.html <view class=swiper-tab> <view class=swiper-tab-list xss=removed data-current=0 bindtap=swichNav>Seside1 <view class=swiper-...

收起
微信小程序代码-下拉刷新，tab切换功能.zip
2020-04-22 16:04:20

微信小程序代码-下拉刷新，tab切换功能.zip，小程序模板代码，可以直接从源码里粘贴复制过来，虽然这样做不利于自己独立编写代码。

收起

微信小程序 tab页面切换学习01

2022-04-13 16:53:16

<text>{{item.name}}text> view> view> ('+swiperList[currentTab].transformLine+'rpx)'}}" > <view class="tabLine">view> view> view> view> <view class="swiperBox"> (100vh - 182rpx);"> ...

在这里插入图片描述

<!--pages/tabbar/tabbar.wxml-->
<view class="container">
    <view class="applyBox">
        <view class="searchBar">
        <view class="searchbarBox">            
            <view class="searchInput">
                <image class="xuni-icon" ></image>
                <input  type="text" placeholder="职位、技能等"/>
            </view>
        </view>
        </view>
        <view class="chooseTab">
            <view class="choosetabBox" wx:for="{{swiperList}}" wx:for-item="item" wx:key="index">
                <view class="chooseTitle choose{{currentTab == index ? 'Selected' : ''}}" data-id="{{index}}" bindtap="switchNav" >
                    <text>{{item.name}}</text>
                </view>
            </view>
            <view class="tabLineBox" style="transform:{{'translateX('+swiperList[currentTab].transformLine+'rpx)'}}" >
                <view class="tabLine"></view>
            </view>
        </view>
    </view>

    <view class="swiperBox">        
        <swiper  current="{{currentTab}}" duration="500"  bindchange="swiperChange" style="height:calc(100vh - 182rpx);">
            <swiper-item wx:for="{{swiperList}}" >
                <scroll-view scroll-y="true" enhanced="true" show-scrollbar="false">                
                    <view class="bgred">
                        <list-item></list-item>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
    
</view>

data: {
        currentTab: 0,
        swiperList:[
            {
                id:0,
                name:'岗位1', 
                selector: true,
                content:'123',
                transformLine:24
            },
            {   
                id:1,
                name:'岗位2', 
                selector: false,
                content:'456',
                transformLine:144
            },
            {
                id:2,
                name:'岗位3', 
                selector: false,
                content:'789',
                transformLine:264
            },
            {
                id:3,
                name:'岗位4',
                selector: false, 
                content:'012',
                transformLine:396
            },
        ],
    },
//   岗位学生切换
    switchNav(e) {
        var that = this, currentTab = e.currentTarget.dataset.id;
        // console.log(e,'11' ,currentTab);
        if(currentTab != this.data.currentTab){
            that.setData({
                currentTab: currentTab,
            })
        }
    },

    swiperChange(e) {
        console.log(e)
        // var index = e.current
        this.setData({
        currentTab: e.detail.current,
        })
    }

{
    "usingComponents": {
        "list-item": "/components/list/list"
    }
}


```typescript
/* pages/tabbar/tabbar.wxss */
.searchBar{
    width: 100%;
    height: 100rpx;
    /* background-color: aqua; */
}
.searchbarBox{
    padding: 20rpx;
    box-sizing: border-box;
}
.searchInput{
    display: flex;
    align-items: center;
    background: #F2F2F2;
    padding-left: 20rpx;
    border-radius: 8rpx;
}
.searchInput input{    
    width: 590rpx;
    padding: 10rpx 20rpx;
}

/* 切换卡标签 */
.chooseTab{
    display: flex;
    position: relative;
    border-bottom: 2rpx solid  rgba(0, 0, 0, .05);
}
.choosetabBox{
}
.chooseTitle{
    padding: 20rpx;
}

.bgred{
    width: 100%;
    height: 500px;
    /* background-color: burlywood; */
}
.chooseSelected{
    color: pink;
}
.tabLineBox{
    position: absolute;
    width: 50rpx;
    padding: 0 10rpx;
    margin-top: 70rpx;
    transform: translateX(25rpx);
    transition: all 400ms ease-in-out;
}
.tabLineBox .tabLine{
    width: 100%;
    background-color: cadetblue;
    height: 6rpx;
}

.swiperBox{
    /* background-color: coral; */
}
scroll-view{
    height: calc(100vh - 182rpx);
    /* background-color: pink; */
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

收起

展开全文

微信小程序中滑动切换tab
2017-08-12 19:46:20

微信小程序中滑动切换tab

收起
微信小程序实现滴滴导航tab切换效果
2020-12-30 00:25:17

本文实例为大家分享了微信小程序实现tab切换效果的具体代码，供大家参考，具体内容如下效果图如下： (请自动忽视底部tab…..) 简单介绍一下：顶部导航使用 scroll-view 组件中间的内容部分使用 swiper 组件 ...

收起
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2020-08-30 21:03:07

本文主要介绍了微信小程序开发之选项卡(窗口底部TabBar)页面切换的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

收起
微信小程序tab分页demo
2016-12-22 15:46:47

微信小程序tab分页demo，目前使用固定数据展示，具体请结合api请求服务器数据

收起

微信小程序点击页面tab栏切换

2021-01-08 17:33:02

微信小程序点击页面tab栏切换 wxml <view class="container"> <view class="swiper-tab"> <block wx:for="{{swipertab}}" wx:key="sptab"> <view class="swiper-tab-list {{currtab == ...

微信小程序点击页面tab栏切换

在这里插入图片描述

wxml

<view class="container">
  <view class="swiper-tab">
    <block wx:for="{{swipertab}}" wx:key="sptab">
      <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" data-current="{{item.index}}"
        bindtap="tabSwitch">{{item.name}}</view>
    </block>
  </view>
  <swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px"
    bindchange="tabChange">
    <!-- 待付款 -->
    <swiper-item>
      <scroll-view class="hot-box" scroll-y="true">
        <view class="orderDetails" wx:for="{{waitPayOrder}}" wx:key="index">
          <view class="orderListTitle">
            <text class="userName">{{item.name}}</text>
            <text class="orderStatus">{{item.state}}</text>
          </view>
          <view class="orderListDetails">
            <view class="productImg">
              <image src="{{item.url}}" background-size="cover"></image>
            </view>
            <view class="productInfo">
              <view class="productTitle">下单时间: {{item.time}}</view>
              <text class="productPrice">当前状态：{{item.status}}</text>
            </view>
          </view>
          <view class="productCount">
            <view>
              <text>合计：￥{{item.money}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
    <!-- 待发货 -->
    <swiper-item>
      <scroll-view class="hot-box" scroll-y="true">
        <view class="orderDetails" wx:for="{{alreadyOrder}}" wx:key="index">
          <view class="orderListTitle">
            <text class="userName">{{item.name}}</text>
            <text class="orderStatus">{{item.state}}</text>
          </view>
          <view class="orderListDetails">
            <view class="productImg">
              <image src="{{item.url}}" background-size="cover"></image>
            </view>
            <view class="productInfo">
              <view class="productTitle">下单时间: {{item.time}}</view>
              <text class="productPrice">当前状态：{{item.status}}</text>
            </view>
          </view>
          <view class="productCount">
            <view>
              <text>合计：￥{{item.money}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
    <!-- 待收货 -->
    <swiper-item>
      <scroll-view class="hot-box" scroll-y="true">
        <view class="orderDetails" wx:for="{{lostOrder}}" wx:key="index">
          <view class="orderListTitle">
            <text class="userName">{{item.name}}</text>
            <text class="orderStatus">{{item.state}}</text>
          </view>
          <view class="orderListDetails">
            <view class="productImg">
              <image src="{{item.url}}" background-size="cover"></image>
            </view>
            <view class="productInfo">
              <view class="productTitle">下单时间: {{item.time}}</view>
              <text class="productPrice">当前状态：{{item.status}}</text>
            </view>
          </view>
          <view class="productCount">
            <view>
              <text>合计：￥{{item.money}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
    <!-- 售后订单 -->
    <swiper-item>
      <scroll-view class="hot-box" scroll-y="true">
        <view class="orderDetails" wx:for="{{endOrder}}" wx:key="index">
          <view class="orderListTitle">
            <text class="userName">{{item.name}}</text>
            <text class="orderStatus">{{item.state}}</text>
          </view>
          <view class="orderListDetails">
            <view class="productImg">
              <image src="{{item.url}}" background-size="cover"></image>
            </view>
            <view class="productInfo">
              <view class="productTitle">下单时间: {{item.time}}</view>
              <text class="productPrice">当前状态：{{item.status}}</text>
            </view>
          </view>
          <view class="productCount">
            <view>
              <text>合计：￥{{item.money}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

** wxss**

.swiper-tab {
  height: 80rpx;
  line-height: 80rpx;
  background: #ffffff;
  columns: #999999;
  display: flex;
  position: relative;
  z-index: 2;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-bottom: 2rpx solid #e6e6e6;
}

.swiper-tab-list {
  padding: 0 8rpx;
  font-size: 30rpx;
}

.on {
  border-bottom: 8rpx solid #ff9908;
  color: #ff9908
}

.navTopList {
  display: flex;
  width: 100%;
  height: 70rpx;
  background: #fff;
  border-bottom: 1rpx solid #e6e6e6;
  margin-top: 10rpx;
}

.navTopList .order-info {
  text-align: center;
}

.navTopList .order-info view {
  width: 56rpx;
  height: 56rpx;
  margin-left: 31rpx;
}

.navTopList .order-info text {
  font-size: 34rpx;
}

.navTopList .order-info text.active {
  color: #ff6662;
}

.navTopList .ywc,
.navTopList .dfk,
.navTopList .yqx {
  flex: 1;
}

/*订单列表*/
.orderDetails {
  background: #fff;
  border-bottom: 20rpx solid #f5f5f5;
}

.orderListTitle {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #BEBEBE;
}

.orderListTitle .userName {
  padding-right: 50rpx;
  margin-left: 10px;
}

.orderListTitle .orderStatus {
  float: right;
  margin-right: 20rpx;
  color: #2f7b27;
  font-size: 34rpx;
}

.orderListDetails {
  display: flex;
  height: 200rpx;
  border-bottom: 1rpx solid #f3f3f3;
}

.orderListDetails .productImg {
  flex: 1;
  height: 180rpx;
  width: 120px;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

.orderListDetails .productImg image {
  width: 100px;
  height: 90%;
}

.orderListDetails .productInfo {
  flex: 4;
  margin: 40rpx 10px 20px 30rpx;
  font-size: 15px;

}

.orderListDetails .productInfo .productTitle {
  font-size: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}

.productCount {
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #f3f3f3;
}

.productCount>view {
  float: right;
  margin-right: 30rpx;
}

** js**

Page({
 
  /**
  * 页面的初始数据
  */
  data: {
    currtab: 0,
    swipertab: [
      { 
        name: '待付款', 
        index: 0 
      }, 
      { 
        name: '待发货', 
        index: 1 
      }, 
      { 
        name: '待收货', 
        index: 2 
      },
      { 
        name: '售后订单', 
        index: 3 
      }
    ],
    goods_arr:[
      {
        name:'夏桑菊',
        specs:'10袋',
        company:'广州白云山制药有限公司',
        price:'6.20',
        total:'12.40'
      },
      {
        name:'夏桑菊',
        specs:'10袋',
        company:'广州白云山制药有限公司',
        price:'6.20',
        total:'12.40'
      }
    ],
    order_status:false,
  },
  onLoad: function (options) {
    console.log('传值',options.id,this)
    const that=this;
    if(options.id!=0){
      that.setData({
        currtab: options.id
      })
    }
  },
  /**
  * 生命周期函数--监听页面初次渲染完成
  */
  onReady: function () {
    // 页面渲染完成
    this.getDeviceInfo()
    this.orderShow()
  },
   
  getDeviceInfo: function () {
    let that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          deviceW: res.windowWidth,
          deviceH: res.windowHeight
        })
      }
    })
  },
   
  /**
  * @Explain：选项卡点击切换
  */
  tabSwitch: function (e) {
    console.log('值',e)
    var that = this
    if (this.data.currtab === e.target.dataset.current) {
      return false
    } else {
      that.setData({
        currtab: e.target.dataset.current
      })
    }
  },
   
  tabChange: function (e) {
    console.log('数值',e)
    this.setData({ currtab: e.detail.current })
    this.orderShow()
  },
   
  orderShow: function () {
    let that = this
    switch (this.data.currtab) {
      case 0:
        that.waitPayShow()
        break
      case 1:
        that.alreadyShow()
        break
      case 2:
        that.lostShow()
        break
      case 3:
        that.endShow()
        break
    }
  },
   
  waitPayShow:function(){
    this.setData({
      waitPayOrder: [
        { name: "清热消炎宁胶囊", state: "待付款", time: "2018-10-14 14:00-16:00", status: "待付款", url: "/public/orther_img/produce_bg.png", money: "186" }
      ],
    })
  },

  alreadyShow: function(){
    this.setData({
      alreadyOrder: [
        { name: "清热消炎宁胶囊", state: "待发货", time: "2018-09-30 14:00-16:00", status: "待发货", url: "/public/orther_img/produce_bg.png", money: "132" }, 
        { name: "清热消炎宁胶囊", state: "待发货", time: "2018-10-12 18:00-20:00", status: "待发货", url: "/public/orther_img/produce_bg.png", money: "205" }
      ]
    })
  },
   
  lostShow: function () {
    this.setData({
      lostOrder: [
        { name: "清热消炎宁胶囊", state: "待收货", time: "2018-10-4 10:00-12:00", status: "待收货", url: "/public/orther_img/produce_bg.png", money: "122" }
      ],
    })
  },

  endShow: function () {
    this.setData({
      endOrder: [
        { name: "清热消炎宁胶囊", state: "售后订单", time: "2018-10-4 10:00-12:00", status: "退款成功", url: "/public/orther_img/produce_bg.png", money: "122" }
      ],
    })
  },
})

收起

展开全文

微信小程序界面设计：滑动的TAB切换效果.rar
2019-07-10 09:32:24

这是一款微信小程序界面设计的实例源码，滑动的TAB切换效果，如示例图界面所示，用手轻触TAB，则滑动切换TAB和内容，除了这个主旨功能外，还实现了获取系统信息，滑动切换tab ，点击tab切换等功能。代码中有注释，...

收起
微信小程序 tab 顶部选项卡下载
千次下载 热门讨论 2016-12-01 12:33:06

微信小程序 tab 顶部选项卡

收起
10行代码实现微信小程序滑动tab切换
2020-12-11 21:04:09

本文实例为大家分享了微信小程序滑动tab切换展示的具体代码，供大家参考，具体内容如下效果预览: js部分： Page({ data: { arr: [1,2,3,4,5,6,7,8], index: 1 }, onLoad: function (options) { this....

收起
微信小程序tab栏切换实现
2021-06-15 19:19:57

{ "usingComponents": { "Tabs":"../../components/Tabs/Tabs" }, "navigationBarTitleText": "商品列表" } index.wxml <Tabs tabs="{{tabs}}" bindtabsItemChage="handletabsItemChage" class="block_tab"> ...

收起
微信小程序实现登录注册tab切换效果
2020-10-17 19:01:09

主要为大家详细介绍了微信小程序实现登录注册切换效果，简易版tab切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起
微信小程序 tab切换展示不同的内容
千次阅读 2019-02-21 10:22:25

index.wxml ...tab-left" > <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="1" data-id="1" bindtap="tab">人

收起
微信小程序animatecss插件界面切换动画
2020-03-01 13:42:36

animatecss插件界面切换动画展示动画在我的博客里有 https://mp.csdn.net/console/editor/html/104591165

收起
微信小程序 tab点击切换（不滑动）
2022-04-14 14:47:09

微信小程序 tab点击切换（不滑动）  <view class="body"> <view class="swiper-tab"> <view wx:for="{{tabList}}" wx:key="index" catchtap="change" ...

收起

前端
【微信小程序】解决Echarts在微信小程序tab切换时的显示问题
2021-11-30 22:53:16

在小程序开发时遇到了一个小问题，首先在两个tab页面中都有用到Echarts图表，在页面加载完成时，但是第一个tab页面完成了绘制，另外一个tab页面为空白解决方法:第二个tab页的图表中加上一个条件，只有当currentTab...

收起

echarts 前端 javascript

微信小程序实现tab页面切换功能

微信小程序 Tab页切换更新数据

微信小程序tab切换可滑动切换导航栏跟随滚动实现代码

微信小程序实现tab左右切换效果

微信小程序实现tab切换效果

微信小程序tab页面切换

微信小程序滚动Tab实现左右可滑动切换

微信小程序-微信小程序的多tab实现

微信小程序 swiper制作tab切换实现附

微信小程序代码-下拉刷新，tab切换功能.zip

微信小程序 tab页面切换学习01

微信小程序中滑动切换tab

微信小程序实现滴滴导航tab切换效果

微信小程序开发之选项卡(窗口底部TabBar)页面切换

微信小程序tab分页demo

微信小程序点击页面tab栏切换

微信小程序点击页面tab栏切换

微信小程序界面设计：滑动的TAB切换效果.rar

微信小程序 tab 顶部选项卡下载

10行代码实现微信小程序滑动tab切换

微信小程序tab栏切换实现

微信小程序实现登录注册tab切换效果

微信小程序 tab切换展示不同的内容

微信小程序animatecss插件界面切换动画

微信小程序 tab点击切换（不滑动）

【微信小程序】解决Echarts在微信小程序tab切换时的显示问题

微信小程序tab切换页面