微信小程序自定义tab实现多层tab嵌套

2024-07-28 13:57:04

本文实例为大家分享了微信小程序自定义tab实现多层tab嵌套的具体代码，供大家参考，具体内容如下

仅供参考，刚学，不对的地方希望交流学习

HTML：

<template>
     <view class="">
         <view class="end-title">
         　　<p @tap="change(0)" :class="{btn:btnnum == 0}">服务</p>
         　　<p @tap="change(1)" :class="{btn:btnnum == 1}">评价</p>
         </view>
         <view class="end-cont" :class="{dis:btnnum == 0}">
          　　<view class="end-title">
            　　<view @tap="change1(0)" :class="{btna:bu == 0} " >洗车</view>
            　　<view @tap="change1(1)" :class="{btna:bu == 1}">保养</view>
                <view @tap="change1(2)" :class="{btna:bu == 2}">轮胎</view>
            　　<view @tap="change1(3)" :class="{btna:bu == 3}">安装</view>
            </view>
            <view class="end-cont" :class="{dis:bu == 0}">
             　　洗车
            </view>
            <view class="end-cont" :class="{dis:bu == 1}">
             　　保养
            </view>
            <view class="end-cont" :class="{dis:bu == 2}">
             　　轮胎
            </view>
            <view class="end-cont" :class="{dis:bu == 3}">
             　　安装
            </view>
         </view>
         <view class="end-cont" :class="{dis:btnnum == 1}">
            评论
         </view>
     </view>
</template>

js部分

export default {
        data(){`在这里插入代码片`
            return{
                 btnnum: 0,
                 bu:0
            }
        },
        methods: {
          change(e) {
               this.btnnum = e
               console.log(this.btnnum)
           },
           change1(e){
               this.bu=e
               console.log(this.bu)
           }
        }
    }

css部分：

/* 将三个内容view的display设置为none(隐藏) */
    .end-title{
        display: flex;
        
    }
    .end-title p{
        flex-grow: 1;
        text-align: center;
    }
    .end-title view{
        flex-grow: 1;
        text-align: center;
        background-color: #6666660d;
        width: 20%;
        margin:0 20rpx ;
        border-radius: 20rpx;
    }
    .end-cont{
        margin: 0 10rpx;
        display: none;
        background:#fff;
        /* border: 1px solid ; */
        /* background-color: #999999; */
        border-radius: 5px;
    }
    .btn{
         color: red;
    }
    .btna{
        color: red;
        background: #e8dcdb;
        
    }
    .dis{
        display: block;
    }

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序实现跟随菜单效果和循环嵌套加载数据

本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&
微信小程序scroll-view横向滑动嵌套for循环的示例代码

1.布局及样式等 (1)xml布局 <view class="container"> <scroll-view scroll-x="true"> <view class="item-content" wx:for="{{list}}" wx:for-item="item"> <view class="title">{{item.title}
微信小程序中页面FOR循环和嵌套循环

微信小程序中页面FOR循环和嵌套循环单个循环 <view wx:for="{{pinpaiTishi}}" wx:key="{{xxx}}"> <view wx:if="{{item.name!=null}}" wx:key="{{xxxx}}"> //判断name是否为null <view class="tr"> <view class="td-lef
微信小程序循环及嵌套循环的使用总结

微信小程序循环及嵌套循环的使用总结关于微信小程序,最近被安排做微信小程序,首次接触,总体来说上手不是太困难. 对于小程序的循环问题颇有感触,因为自己绑定数据到界面无数次用到循环和嵌套循环. 对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中定义的对象中: //首页话题列表 wx.request({ url: 'https://*******************', method: 'POST', data: { pageNum: 1, pageSize: 10 },
微信小程序实现给嵌套template模板传递数据的方式总结

本文实例总结了微信小程序实现给嵌套template模板传递数据的方式.分享给大家供大家参考,具体如下: 一.template模板调用的数据是单一形态时: indexTemplate模板: <import src="../lookAndCollect-template/lookAndCollect-template.wxml" /> <template name="indexTemplate"> <view class="use
微信小程序实现双层嵌套菜单栏

最近在做的项目有这样一个需求,也不太好描述,就是有两个顶部菜单栏,每个二级菜单栏的item都有自己页面,每个页面都可以通过左右滑动来切换,第一个想到的实现方法就是双层swiper嵌套,但想要达到一个联动的效果还是有一点点复杂,去网上找了一圈也没结果只好自己来搞一下了先贴一下效果图 1.先把第一层swiper框架搭好,需要能通过滑动和点击切换页面,基本方法可百度 2.在第一层的<swiper-item>中嵌入第二层的<swiper>,方法照旧 3.基本功能能实现,问题也来了,如何实
微信小程序实现循环嵌套数据选择

本文实例为大家分享了微信小程序实现循环嵌套数据选择的具体代码,供大家参考,具体内容如下一.效果展示二.代码实现在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常循环,内层循环需要利用wx:for-item将item重新命名. <scroll-view scroll-y class="scrollTime"> <view class="dateItem
微信小程序自定义tab实现多层tab嵌套功能

小程序最近是越来越火了-- 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧. 项目中有个多 tab 嵌套的需求,进入程序主界面下面有两个 tab,进入A模块后,A模块最底下又有多个tab,每个tab上又嵌了2-4个不等的tab... 这种变态需求只能自定义tab了. 其实如果项目不是很复杂,没有多tab嵌套的需求,完全可以用小程序官方的 tabBar,方便快捷. 官方 tabBar 地址:https://developers.weixin.qq.... 一.Demo结构先看效果图吧
微信小程序自定义可滑动的tab切换

本文实例为大家分享了微信小程序自定义tab切换(可滑动),供大家参考,具体内容如下自定义tab切换(可滑动)  <view class="menu"> <navigator wx:for="{{shouye}}" wx:key="index" bindtap="change" class="{{page==index?
微信小程序自定义tab实现多层tab嵌套

本文实例为大家分享了微信小程序自定义tab实现多层tab嵌套的具体代码,供大家参考,具体内容如下仅供参考,刚学,不对的地方希望交流学习 HTML: <template> <view class=""> <view class="end-title"> <p @tap="change(0)" :class="{btn:btnnum == 0}&qu
微信小程序项目实践之主页tab选项实现

官方文档效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改如图: 先介绍一下app.json文件默认有两个代码块: 1.pages 这里注册了当前小程序的所有页面路径 2.window 这里用于设置小程序的状态栏.导航条.标题.窗口背景色. 以上两个详细使用参考文档,本文章不做介绍我们看下app.json提供的另一个配置项:tabBar tabBar提供一些公有的属性对tab配置: 而针对每一个单独的tab 也有一些属性进行配置: 官方示意图: 具体实现底部Tab
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

本文实例讲述了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能.分享给大家供大家参考,具体如下: 顶部滚动选项卡话不多说,直接上代码 pages/home/home.wxml <scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '>  <view class="tab"> <view class=&qu
微信小程序自定义tabBar在uni-app的适配详解

引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API 需求需要在微信小程序中,实现一个中间图标突出显示的异形导航栏. 如下图实现方法设计要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到.那么,就有以下两种可替代方法. 在每一个页面都加载一个tabBar组件,与页面同时渲染. 设置自定义tabBar,修改tabBar的样式. 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题.方法2则是微信官方提供
微信小程序自定义弹窗实现过程(附代码)

这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: 而有时候我们需要更丰富的弹窗时,就可用自定义弹窗的样式: 举个例子,像下面图的样式,点击后会弹出不一样的窗口: 代码如下: index.wxml 文件  <view class="click" bindtap="click&qu
微信小程序自定义tabBar的踩坑实践记录

微信官方文档对自定义 tabBar 的阐述较为潦草,在开发自定义 tabBar 过程中我踩了很多坑,因此在此处做个总结. 我使用 Vant Weapp作为 UI 组件库,下面以此组件库为例. 定义 tabBar 创建自定义 tabBar 文件创建一个与 /pages 的同级目录,命名为 /custom-tab-bar,注意目录层级与目录命名问题,不可用其他名称命名. 在 /custom-tab-bar 下创建四个文件: index.js index.json index.wxml index
微信小程序自定义菜单导航实现楼梯效果

设计初衷在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant UI框架也为我们实现了这一效果. 微信小程序该如何实现?? 效果展示当菜单导航滚动到页面顶部时,菜单吸顶当点击菜单按钮时,切换到对应区域(过渡到该区域,有动画效果) 当内容区滚动到某类区域时,对应区域的菜单按钮高亮设计思路 1.吸顶效果的实现获取菜单导航距离页面顶部距离wx.createSel
一步步教你实现微信小程序自定义组件

目录前言组件的声明与使用组件通信方法一 WXML 数据绑定方法二事件方法三 selectComponent 获取组件实例对象方法四 url 参数通信参数过长怎么办?路由 api 不支持携带参数呢? 方法五 EventChannel 事件派发通信会出现数据无法监听的情况吗? 使用自定义的事件中心 EventBus 小结附:组件和页面的区别总结前言在微信小程序开发过程中,对于一些可能在多个页面都使用的页面模块,可以把它封装成一个组件,以提高开发效率.虽然说我们可以引入整个

微信小程序自定义tab实现多层tab嵌套

相关推荐

随机推荐