微信小程序开发-tab页导航

最新推荐文章于 2024-06-22 13:40:14 发布

BluePROT

最新推荐文章于 2024-06-22 13:40:14 发布

阅读量558

点赞数

分类专栏：微信小程序文章标签：微信小程序前端 javascript

本文链接：https://blog.csdn.net/qq_41037945/article/details/128574945

版权

本文介绍了微信小程序中实现Tab页导航的步骤，包括wxml布局文件、wxss样式设置和js逻辑处理。通过js中的data初始化数据和titleClick函数处理页面切换。提供了一个基础的Tab页模板供开发者参考。

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

文章目录

- 开始
- - wxml
  - wxss
  - js
- 参考链接

开始

示例图大致如下
在这里插入图片描述
就按照这个模板进行开发

wxml

布局文件
这里面可以根据内容修改一下每个tab页的卡片内容

<view>
    <view class='navBox'>
        <view class='titleBox' id="allaid" bindtap='titleClick' data-idx='0'>
        <text class="{
    {0 == currentIndex ? 'fontColorBox' : ''}}">待接收</text>
        <hr class="{
    {0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
        </view>
        <view class='titleBox' id="aiding" bindtap='titleClick' data-idx='1'>
        <text class="{
    {1 == currentIndex ? 'fontColorBox1' : ''}}">待处理</text>
        <hr class="{
    {1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
        </view>
        <view class='titleBox' id="aidfinish" bindtap='titleClick' data-idx='2'>
        <text class="{
    {2 == currentIndex ? 'fontColorBox2' : ''}}">已完成</text>
        <hr class="{
    {2== currentIndex ? 'lineBox' : 'notLineBox'}} " />
        </view>
    </view>
    <!-- 内容布局 -->
    <swiper class='swiperTtemBox' bindchange='pagechange' current='{
    {currentIndex}}'>
        <!--待接收 -->
        <swiper-item class='swiperTtemBox' catchtouchmove='onTouchMove'>
        <scroll-view class='scbg' scroll-y='true'>
            <block wx:for="{
    {receivedList}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
            <view class='box'>
                <view class='firstblock'>
                <!-- 日期 -->
                <view class="item_State">
                    <view class="state_bg">
                    <!-- 可添加背景状态图片 -->
                    <image class="img_state_bg" src=""> </image>
                    <text class='txt_state_bg'>待接收</text>
                    </view>
                    <view class