小程序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}}">{{item}}</view>

yearselect(e){
this.setData({
yearselect:e.currentTarget.dataset.year,
current:e.currentTarget.dataset.index
})
},

.active{
background: #62B0F2;
color: #fff;
}

原文地址:https://www.cnblogs.com/wjhaaa/p/9936492.html

时间: 2024-08-01 08:19:40

小程序tab导航切换样式的相关文章

微信小程序——点击切换样式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

微信小程序tab栏切换

index.wxml <text data-current="0" class="{{currentTab == 0? 'active' : ''}}">消息</text> <text data-current="1" class="{{currentTab == 1 ? 'active' : ''}}">通知</text> <view hidden="{{isS

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

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

微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键、首页键,动态设置标题,响应式组件

微信小程序自定义导航栏 navigation bar 返回键 首页 github: https://github.com/chen-yt/wx_custom_navigation_bar https://github.com/Superman2113/wx_custom_navigation_bar 代码 navbar组件 navbar.wxml <view class="navbar" style="{{'height: ' + navigationBarHeight

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

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

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

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

小程序之导航跟随

最近在牛客网上五一做到一道关于position定位的题,惊喜的发现还有一种布局叫position:sticky,它就像是relative和fixed的合体, 其常用场景:当元素距离页面视口(Viewport,也就是fixed定位的参照)顶部距离大于 0px 时,元素以 relative 定位表现,而当元素距离页面视口小于 0px 时,元素表现为 fixed 定位,也就会固定在顶部. 想到我最近手里的一个小程序,(页面如下) 我很兴奋的想要用这个css特性改成跟随导航的效果(结果页面如下) 即当页

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

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

微信小程序覆盖自定义组件样式

小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp.iviewui.com/所提供的组件样式为例,它定义了一个外部类接口: 1. 通过第三方组件给出的externalClasses: ['i-class'],来指定自己的样式类 自己的wxml i-class="myrate" <i-rate i-class="myrate&