小程序 Tab 标签页 - 内容切换

最新推荐文章于 2024-05-02 00:12:13 发布
最新推荐文章于 2024-05-02 00:12:13 发布
阅读量814 收藏 3
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wang_MengHan/article/details/115332589
版权

展示页面
在这里插入图片描述

wxml:

<view class="order">
    <van-tabs class="van-tab-fixed" line-width="20px" active="{{status}}"  color="#00c8be" bind:click="onTab">
        <van-tab title="全部"   name="ALL"></van-tab>
        <van-tab title="待付款" name="NEW "></van-tab>
        <van-tab title="待发货" name="PAYED "></van-tab>
        <van-tab title="待收货" name="WAIT_CONFIRM "></van-tab>
        <van-tab title="待评价" name="WAIT_COMMENT "></van-tab>
    </van-tabs>
    <!-- style -->
    <view class="order-all">
        <view class="order-detail" wx:for="{{orderList}}" wx:key="index">
            <view class="top">
                <view class="left">{{item.create_time}}</view>
                <view class="right">
                    <text class="status">{{item.status_name}}</text>
                    <view class="times" wx:if="{{item.status_name == '待付款'}}">
                        <van-count-down use-slot time="{{ time }}" bind:change="onChange">
                            <text class="item">{{ timeData.hours }}</text>:
                            <text class="item">{{ timeData.minutes }}</text>:
                            <text class="item">{{ timeData.seconds }}</text>
                        </van-count-down>
                    </view>

                </view>
            </view>
            <!-- style -->
            <navigator url="../logistics_detail/logistics_detail">
                <view class="order-shop">
                    <block wx:for="{{item.sku}}" wx:key="index" wx:for-item="img">
                        <view class="img" wx:if="{{index<=2}}">
                            <image mode="aspectFit" src="{{img.url}}" />
                        </view>
                    </block>
                    <view class="count">
                        <text>共{{item.item_num}}件</text>
                        <van-icon name="arrow" color="#999999" />
                    </view>
                </view>
            </navigator>
            <!-- endStyle -->
            <view class="order-detail-bottom">
                <view class="left">
                    <!-- <view class="count">共9件</view> -->
                    <view class="total">
                        <text>合计:</text>
                        <text class="price">￥{{item.amount}}</text>
                    </view>
                </view>
                <view class="right">
                    <view class="c-bg">立即支付</view>
                    <view bindtap="lookLogis">查看物流</view>
                    <view wx:if="{{item==2}}" class="disable">提现发货</view>
                    <view wx:if="{{item==1}}" bindtap="onCancel">取消订单</view>
                </view>
            </view>
        </view>
    </view>
    <!-- Style-end -->

    <!--页面加载提示--> 
    <load-tips list="{{orderList}}" isMore="{{isMore}}" />
    <!--页面加载提示-end-->

</view>

wxss:

page {
    background: #f7f7f7;
}
.van-tab-fixed {
    width: 100%;
    position: fixed;
    z-index: 1;
}
.order-all {
    padding: 100rpx 30rpx 30rpx 30rpx;
}
.order-all .order-detail {
    width: 100%;
    background: #fff;
    border-radius: 15rpx;
    margin-bottom: 20rpx;
}
.order-all .order-detail .top {
    padding:20rpx 30rpx;
    display: flex;
    justify-content: space-between;
}
.order-all .order-detail .top .left {
    font-size: 26rpx;
    color: #999;
}
.order-all .order-detail .top .right {
    display: flex;
}
.order-all .order-detail .top .right .status {
    color: #FA4616;
    font-size: 26rpx;
}
.order-all .order-detail .top .right .times {
    display: inline-block;
    margin-left: 20rpx;
    color: #00c8be;
}
.order-all .order-detail .top .right .times .item {
    display: inline-block;
    width: 22px;
    margin-right: 5px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #00c8be;
    border-radius: 2px;
}
.order-all .order-detail .order-shop {
    padding: 30rpx 30rpx;
    display: flex;
    justify-content: space-between;
}
.order-all .order-detail .order-shop .img {
    width: 150rpx;
    height: 150rpx;
    display: flex;
}
.order-all .order-detail .order-shop .img image {
    width: 150rpx;
    height: 150rpx;
}
.order-all .order-detail .order-shop .count {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 26rpx;
    color: #999;
}
.order-all .order-detail .order-detail-bottom {
    padding: 20rpx;
    border-top: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-all .order-detail-bottom .left {
    display: flex;
    align-items: center;
}
.order-all .order-detail-bottom .left view {
    font-size: 28rpx;
    margin-right: 20rpx;
}
.order-all .order-detail-bottom .left .price {
    color: #FA4616;
    font-size: 32rpx;
    font-weight: 600;
}
.order-all .order-detail-bottom .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.order-all .order-detail-bottom .right view {
    width: 120rpx;
    height: 54rpx;
    text-align: center;
    line-height: 54rpx;
    border-radius: 5rpx;
    border: 1px solid #999999;
    font-size: 24rpx;
    color: #999;
    margin-left: 20rpx;
}
.order-all .order-detail-bottom .right view.disable {
    background: #EFEFEF;
    border: 1px solid #EFEFEF;
    color: #D1D1D1;
}
.order-all .order-detail-bottom .right view.c-bg {
    color: #fff;
    border: 1px solid #00c8be;
}

json:

{
    "navigationBarTitleText": "我的订单",
    "usingComponents": {
        "van-count-down": "@vant/weapp/count-down/index",
        "van-tab": "@vant/weapp/tab/index",
        "van-tabs": "@vant/weapp/tabs/index",
        "van-button": "@vant/weapp/button/index",
        "van-icon": "@vant/weapp/icon/index",
        "van-dialog": "@vant/weapp/dialog/index",
        "van-empty": "@vant/weapp/empty/index",
        "load-tips":"/components/load-tips/index"
    }
}

js:

const utils = require('../../../../utils/utils');
Page({

    /**
     * 页面的初始数据
     */
    data: {
        status: 'ALL',
        page: 1,
        time: 30 * 60 * 60 * 1000,
        timeData: {},
        orderList: [],
        isMore: true, //是否有更多
        isLoad: false, // 是否加载中
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.orderAll()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.data.isMore) {
            this.setData({
                page: ++this.data.page
            })
            this.orderAll();
        }
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },
    //tab切换
    onTab: function (e) {
        var status = e.detail.name;
        if (status == this.data.status) {
            return;
        }
        this.setData({
            status: status,
            page: 1,
            orderList: [],
            isMore: true
        })
        this.orderAll()
    },
    // 全部
    orderAll: function (e) {
        if (!this.data.isMore || this.data.isLoad) {
            return;
        }
        this.setData({
            isLoad: true
        })
        let _this = this;
        utils.c2s({
            url: 'http://shop.php?call=order.index',
            data: {
                status: this.data.status,
                page: this.data.page,
                limit: 20
            },
            success: function (res) {
                console.log(res.data, "全部");
                let orderList = res.data
                _this.setData({
                    orderList:  _this.data.orderList.concat(orderList),
                    isMore: orderList.length>=20?true:false,
                    isLoad: false
                })
            }
        })
    },

    onChange(e) {
        this.setData({
            timeData: e.detail,
        });
    },
    // 查看物流
    lookLogis: function () {
        wx.navigateTo({
            url: '../logistics_list/logistics_list',
        })
    },
    // 取消订单弹层
    onCancel: function () {
        wx.showModal({
            content: '是否确认取消订单',
            success(res) {
                if (res.confirm) {
                    console.log('用户点击确定')
                } else if (res.cancel) {
                    console.log('用户点击取消')
                }
            }
        })
    },

})

components组件
wxml:

<!--components/load_tips.wxml-->
<view class="common_loading">
    <!--暂无数据-->
    <van-empty wx:if="{{!list.length && !isMore}}" 
        description="暂无数据" 
        image="https://img.yzcdn.cn/vant/custom-empty-image.png" />
    <!--加载中-->
    <van-loading  wx:if="{{isMore}}" size="24px">加载中...</van-loading>
    <!--底线提示-->
    <view wx:if="{{list.length && !isMore}}">—— 我是有底线的 ——</view>
</view>

json:

{
    "component": true,
    "usingComponents": {
        "van-loading": "@vant/weapp/loading/index",
        "van-empty": "@vant/weapp/empty/index"
    }
}

js:

// components/load-tips.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        list: {
            type: Array,
            value: []
        },
        isMore: {
            type: Boolean,
            value: true
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        
    },

    /**
     * 组件的方法列表
     */
    methods: {
        
    }
})
别凶小晗.
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序学习：（六）tab切换及内容切换
weixin_39459768的博客
08-01 1230
微信小程序学习：（六）tab切换及内容切换 github地址： https://github.com/leoricding/- (一)问题分析 需求：实现tab切换，内容切换；内容切换，tab也切换。 解决方案：js动态计算，实现swiper-item的序号以及tab的序号的绑定。 （二）直接上代码 很简单，没什么可说的。 // pages/lessionDetail/lessionDetail....
微信小程序滚动Tab实现左右可滑动切换
12-10
微信小程序滚动Tab实现左右可滑动切换 效果： 最终效果如上。问题： 1、tab标题总共8个，所以一屏无法全部显示。 2、tab内容区左右滑动切换时，tab标题随即做标记（active）。 3、当active的标题不在当前屏显示...
微信小程序使用vant weapp tab标签页，从其他页面或编译模式中指定当前页tab标签索引值，tab标签页无变化问题。
qq_46143478的博客
10-16 1808
微信小程序使用vant weapp tab标签页，从其他页面或编译模式中指定当前页tab标签索引值，tab标签页无变化问题。
微信小程序开发中的多页面切换与跳转
qq_67153941的博客
05-02 141
二、页面跳转 除了页面切换，微信小程序还支持页面跳转的功能。页面跳转与页面切换相比，会替换当前的页面，而不是在当前页面打开新页面。微信小程序支持多页面切换与跳转，开发者可以通过编写代码来实现。下面我将详细介绍如何在微信小程序中进行页面切换与跳转。组件和微信小程序提供的方法，开发者可以灵活地进行页面的切换和跳转操作。组件包含了一些常用的页面切换功能，例如跳转到新页面、返回上一页等。一、页面切换 在微信小程序中，可以通过使用小程序提供的。属性来指定跳转的页面路径。属性来指定跳转的页面路径。方法来进行页面跳转。
微信小程序页签切换
sea_r的博客
07-20 2354
小程序页签滑动切换界面展示wxml部分wxss部分js部分 界面展示 wxml部分 <view class='content'> <view class='log'> <view class="{{currentTab==0?'selected':'default'}}" data-current="0" bindtap='switchNav'> ...
微信小程序开发4——利用自定义组件实现页面内容切换功能
snjxh的博客
05-30 2647
首先展示一下要显示的功能：` 首先需要在开发者工具中新建一个文件夹（components），分别在文件夹中新建.js .json .wxml .wxcss四个文件（可以右键文件夹，选择新建新建（component）。创建的这个文件我们称为子组件。 然后在开发者工具中再新建一个页面，这个页面称为父组件。 下面我们看一下子组件中的代码： .wxml <view class="tabs"> <view class="tabs_title"> <view wx:for="{{t
Vant 3 #Tab标签页 #scrollspy滚动导航模式下手动修改active时无法滚动到指定的内容页问题
weixin_50577324的博客
03-04 3707
van-tabs 左右切换时是可以通过修改active的值来实现内容的切换； <template> <Tabs ref="tabs" @click-tab="handleTab" @scroll="handleScroll" v-model:active="activeName" sticky lazy-render > <!-- scrollspy --> <Tab v-for="item
vant Tab 标签页 切换
weixin_65635437的博客
05-25 1223
vant Tab 标签页 切换
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
11-30
看到今日头条小程序页面可以滑动切换，而且tab导航条也会跟着滚动，点击tab导航，页面滑动，切导航栏也会跟着滚动，就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多，我...
小程序顶部tab页点击切换案例
01-22
综上所述，实现微信小程序顶部Tab页点击切换需要理解小程序的基本架构，掌握页面配置、事件监听、数据管理以及样式设计等技术。通过实际项目的实践，开发者能够熟练地创建出交互流畅、用户体验良好的小程序应用。
微信小程序-下拉刷新，tab切换-程序源码.zip
05-31
这个压缩包文件“微信小程序-下拉刷新，tab切换-程序源码.zip”包含了实现微信小程序中两个常见功能的源代码：下拉刷新（pull-down refresh）和标签页切换（tab switch）。下面我们将详细探讨这两个功能及其在微信小...
微信小程序实现tab和swiper切换结合效果
08-28
在微信小程序中，实现Tab（标签）和Swiper（轮播图）的切换结合效果是一项常见的功能需求，它能够提供用户友好的界面交互，让用户在不同的内容板块间轻松浏览。以下将详细介绍如何在微信小程序中实现这一效果。 ...
VantUI_van-tabs_active属性使用无效踩坑记录
wsfufua的博客
08-29 1276
Vant Weapp 使用van-tabs时设置active无效的问题解决及应用
vant移动端tab标签如何找到对应的标签绑定事件
seeeeeeeeeee的博客
08-18 2515
比如结构是这样的。 <van-tabs v-model="active" @click="onClick"> <van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 2">内容 2</van-tab> <van-tab title="标签 3">内容 3</van-tab> <van-tab title="标签 4">内容 4</van
原生微信小程序使用vant的tabbar（解决点击俩次图标才正确切换）
weixin_62639453的博客
03-25 4693
一、声明：在导入使用vant （tabbar）组件的时候，发现通过点击切换的方法来更改active的方法，会出现图标没用及时对应上，需要第二次点击才对应上的问题。在每一个页面使用tabbar自定义组件的地方，在onshow生命周期函数里初始active的值，用来对应每个页面切换之后展示对应的图标。6.与pages同名创建custom-tab-bar文件夹（名字不能变），并创建index组件（tabbar自定义组件）假如，我采用index页面作为一个tabbar页，对应的active可以这么更改其选中态。
微信小程序开发总结
qq_28353055的博客
11-02 232
可以通过 wx:for-item 来指定取值 wx:for-index 指定index <van-tabs active="{{ active }}" bind:change="onTabChange" swipeable sticky class="tabs" tab-active-class="chooseTab"> <van-tab title="{{cell.label}}" wx:for="{{tabList}}" wx:for-item="tab" wx:key="ind
van-tabs的样式
m0_55927813的博客
03-16 2409
title中字体的大小等样式 是在van-tab标签上设置title-style='font-weight: bold;'属性，改变每一项的标题样式。1.title的颜色在van-tabs上设置title-active-color="#ff0000"属性，改变标题的颜色。2.tab的下划线样式。
vant的tab栏标题宽度设置
搬砖团团长
07-26 5416
在wxss 中设置 //宽度就不在等宽，现在就自适应文字宽度 .van-tab{ flex:none!important; }
微信小程序tab切换
最新发布
06-20
微信小程序中的TabBar是用于展示小程序的主要入口和导航栏，用户可以通过它在不同功能模块之间进行切换。TabBar通常位于小程序底部，包含固定数量的选项卡，每个选项卡对应小程序的一个页面或功能。 以下是TabBar的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值