微信小程序点击顶部导航栏切换样式代码实例

这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

类似这样的效果

<view class='helpCateList'>
  <!-- 类别 -->
  <scroll-view class='scroll-view' scroll-x="true">
   <view class="item-content" wx:key="id" wx:for="{{helpCateList}}" wx:for-item="item">
    <view class="content {{currentTab == item.itemsId ? 'active' : ''}}" data-itemsId='{{item.itemsId}}' bindtap='cateChange' >{{item.itemsName}} </view>
   </view>
  </scroll-view>
 </view>
.helpDisList .content{
 position: relative;
 width: 710rpx;
 border-radius: 5rpx;

}
.active{ //当点击的时候添加这个样式
 /* border-bottom: 4rpx solid rgb(252, 186, 7); */
 color:rgb(252, 186, 7);
}
Page({
 data:{

  helpCateList:[ //数据从后台请求回来赋值
   // { id: "1", desc: "康复医疗" },
   // { id: "2", desc: "教育" },
   // { id: "3", desc: "就业" },
   // { id: "4", desc: "扶贫" },
   // { id: "5", desc: "职业培训" },
   // { id: "6", desc: "社会保障" },
   // { id: "7", desc: "文化生活" },
  ],
  currentTab: 1,
 },
 cateChange(e) {
  console.log(e)
  let that = this
  that.setData({

   currentTab: e.currentTarget.dataset.itemsid, //这个必须要

  })
 },

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

赞 (0)

相关推荐

  • 微信小程序仿今日头条导航栏滚动解析

    项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子 地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll-lite.j实现,weui自己封装了一层,vue中实现代码: <div id="tab-tip" class="container"> <div id="tagnav" class="weui-navigator weui

  • 微信小程序实现左侧滑动导航栏

    微信小程序实现左侧滑动导航栏

    本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码,供大家参考,具体内容如下 左侧滑动导航栏如图 wxml <!-- 左侧滚动栏 --> <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}&quo

  • 微信小程序教程系列之设置标题栏和导航栏（7）

    微信小程序教程系列之设置标题栏和导航栏（7）

    微信小程序标题栏和导航栏的设置方法,具体内容如下 设置标题栏 标题栏window 在app.json文件里面,通过window对象里面的属性进行设置 示例: app.json: 运行: 设置导航栏 导航栏TabBar 如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirect

  • 微信小程序实现的动态设置导航栏标题功能示例

    微信小程序实现的动态设置导航栏标题功能示例

    本文实例讲述了微信小程序实现的动态设置导航栏标题功能.分享给大家供大家参考,具体如下: 场景 当从一个分类列表页面进入到一个详情页面的时候,由于这个详情页面是公用的,为了区分页面,就会设置该页面的导航用以区分.就需要开发者在页面加载的时候进行动态设置导航标题! 实现API wx.setNavigationBarTitle(OBJECT) 语法 wx.setNavigationBarTitle({ title: '当前页面', //页面标题 success: () => {}, //接口调用成功的

  • 微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

    微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

    本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果 实现原理 1. 利用position:absolute在导航下定位一个view作为背景渐变使用; 2. 通过改变改view的opacity来实现透明渐变. WXML <!--pages/scroll/scroll.wxml--> <view style="height:100%;position:fixed;width:100%;"> <scroll-v

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

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论 解决过程 1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用<scroll-view>标签,内容使用<swi

  • 详解微信小程序胶囊按钮返回|首页自定义导航栏功能

    项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页

  • 微信小程序顶部导航栏滑动tab效果

    小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下 效果图: 首先是滑动的效果: <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view> 小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导

  • 微信小程序点击顶部导航栏切换样式代码实例

    微信小程序点击顶部导航栏切换样式代码实例

    这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 类似这样的效果 <view class='helpCateList'> <!-- 类别 --> <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key=&qu

  • 微信小程序 开发之顶部导航栏实例代码

    微信小程序 开发之顶部导航栏实例代码

    微信小程序 开发之顶部导航栏 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap=

  • 微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）

    微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）

    前言 navigationBar相信大家都不陌生把?今天我们就来说说自定义navigationBar,把它改变成我们想要的样子(搜索框+胶囊.搜索框+返回按钮+胶囊等). 思路 隐藏原生样式 获取胶囊按钮.状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度,进行适配 编写新的导航栏 引用到页面 正文 一.隐藏原生的navigationBar window全局配置里有个参数:navigationStyle(导航栏样式),default=默认样式,custom=自定义样式. "wind

  • 微信小程序实战之顶部导航栏(选项卡)(1)

    微信小程序实战之顶部导航栏(选项卡)(1)

    本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu

  • 微信小程序实战之顶部导航栏（选项卡）（1）

    微信小程序实战之顶部导航栏（选项卡）（1）

    本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu

  • 微信小程序实现横向滚动导航栏效果

    微信小程序实现横向滚动导航栏效果

    1.page.wx.css内容如下: <view class='classify_list'> <view class="classify">分类1</view> <view class="classify">分类1</view> <view class="classify">分类1</view> <view class="classify&quo

  • 微信小程序 点击控件后选中其它反选实例详解

    微信小程序 点击控件后选中其它反选实例详解

    微信小程序 点击控件后选中其它反选实例详解 前言: 如果需要实现进来进行给按钮加上买一送一的样式,或者单击就选中单个按钮,只能靠css结合js进行控制了,小程序暂时没有这样的控件. 实现效果图: 微信小程序进来的时候自动进行按钮样式的初始化,这个需要一个字段做判断,加上正则表达式wxml文件: <block wx:for="{{liuliangItems}}"> <block wx:if="{{item.one2one == 1}}"> &l

  • 微信小程序和H5页面间相互跳转代码实例

    这篇文章主要介绍了微信小程序和H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram // 小程序跳转 /* * appId string 是 要打开的小程序 appId * path string 否 打开的页面路径,如果为空则打开首页 * extraData object 否 需要传递给目标小程序的数据,目标小程序可在 App.onLaunch,A

  • 微信小程序 拍照或从相册选取图片上传代码实例

    这篇文章主要介绍了微信小程序 拍照或从相册选取图片上传代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 upload.wxml <!--pages/upload/upload.wxml--> <button bindtap='uploadPhoto'>拍照选取照片上传</button> upload.js // pages/upload/upload.js Page({ data: { imgData: [] }

随机推荐