微信小程序tab栏切换

  • index.wxml

    <text  data-current="0" class="{{currentTab == 0? ‘active‘ : ‘‘}}">消息</text>
    <text  data-current="1" class="{{currentTab == 1 ? ‘active‘ : ‘‘}}">通知</text>
    <view hidden="{{isShow}}">消息</view>
    <view hidden="{{!isShow}}">消息</view>
  • index.js
    data: {
    isShow: true,
    currentTab: 0
    }
    switcher: function (e) {
        if (this.data.currentTab == e.target.dataset.current) {
            return false
        } else {
            var showMode = e.target.dataset.current == 0;
            this.setData({
                currentTab: e.target.dataset.current,
                isShow: showMode
            })
        }
    },

原文地址:https://www.cnblogs.com/luxiaoyao/p/9096706.html

时间: 2024-08-30 10:01:46

微信小程序tab栏切换的相关文章

微信小程序开发--路由切换,页面重定向

这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1  wx.navigateTo(Object) 功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到当前页面. wx.navigateTo({ //当前页面对应的JS文件内 控制模板 url: 'test?id=1' //需要切换到的页面路劲,此处为

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

引用:https://www.cnblogs.com/till-the-end/p/8935152.html 简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论 解决过程 1.在想要实现这个问题的时候找了不少别人的

微信小程序-tab标签栏实现教程

一.摘要 tab栏(标签切换栏)是app中常见的一种交互方式,它可以承载更多的内容,同时又兼顾友好体验的优点.但在小程序中,官方并没有为咱们提供现成的组件.因此我们程序员展现才艺的时候到了(其实市面上的ui库也做了这个组件).今天咱们就来实现一个对用户更加友好的tab栏,让用户“一点”就停不下来,起到解压的功效~~! 废话不多说,先上效果图. 不瞒您说,这东西我能点一天^^.言归正传,由于tab栏用的地方很多,所以需要封装成组件,因此没有开发或者没用过组件的同志请瞧一瞧官方文档.我之前也写过一篇

微信小程序左右滑动切换图片酷炫效果(附效果)

开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. 1 <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSe

微信小程序——自定义菜单切换栏tabbar组件

效果图: wxml代码: <view class="top_tabbar" > <block wx:for="{{itemName}}" wx:key="{{index}}"> <view class="item_name {{tabIndex == index ? 'active' : ''}}" bindtap="handleItem" data-index="{

微信小程序之 catalog 切换

组件名称:catalog 组件属性:catalogData,type:String 组件描述:这是一个子组件,数据从父组件中传递 效果图: catalog 目录为多个,使用 scroll-view 容器.但是在当前组件中,只写每个 catalog 数据展示并实现 catalog 切换效果,这样会保证当前组件的最小粒度. 分析当前组件可能用到的属性为:组件名称,切换状态,未选中状态,切换点击方法. <block wx:for="{{catalogData}}" wx:key=&qu

微信小程序——点击切换样式scroll-view

scroll-view滚动视图点击切换样式 *.wxml <view class="content"> <view class="navbg"> <view class="nav"> <scroll-view class="scroll-view_H" scroll-x="true"> <view class="scroll-view_H&qu

微信小程序组件-----城市切换

直接上地址,有需要的直接下载,使用: https://github.com/chenjinxinlove/citySelect

小程序tab导航切换样式

<view id="green" class="scroll-view-item {{ current == index ? 'active' :'' }} " bindtap="yearselect" wx:for="{{year}}" wx:key="{{index}}" data-year="{{item}}" data-index="{{index}}"