微信小程序动态切换class类名

之前用jquery时我们可以使用：

$(".classify").eq(0).addClass("addStyleMi").siblings().removeClass("addStyleMi");

动态的为元素切换类名，添加css样式。

但是微信小程序中不提供操作Dom的方法，但我们也可以实现为元素动态切换类名。

效果图：

图1 图2

重点是这句代码

下面是完整的代码：

js:

data: {// --------二级分类---------first_names:[{"id":1,"goods_name":"食品土特产"},{"id":2,"goods_name": "健康器械"},{ "id":3,"goods_name": "营养保健" },{"id": 4,"goods_name": "健康调理"},{"id": 5,"goods_name": "保护眼睛"},{"id": 6,"goods_name": "骨骼健康"},{"id": 7,"goods_name": "滋补养生"},{"id": 8,"goods_name": "增强免疫"},{"id": 9,"goods_name": "国内旅游"},],first_id:0,//用于判断是否是当前选中的},// -------动态切换class---------menuClick: function (e) {var that = this;var index = e.currentTarget.dataset.index;//获取当前点击的元素下标console.log(index);that.setData({first_id: index})},

wxml:(scroll-view用于滑动)

<view class='moreBoxs'><scroll-view class="navContent" scroll-x><view class="classify {{first_id==index?'addStyleMi':''}}" bindtap="menuClick" wx:for='{{first_names}}' wx:key='{{index}}' wx:for-item="first_names" wx:for-index="index" data-postid='{{first_names.id}}' data-index='{{index}}' data-postname='{{first_names.goods_name}}'><text>{{first_names.goods_name}}</text></view></scroll-view>
</view>

wxss:

/* 分类开始 */
.moreBoxs{width: 100%;height: 102rpx;border-bottom: solid 2rpx #e5e5e5;position: fixed;top: 0;background-color: #ffffff;z-index: 500;
}.navContent{width: 100%;height: 102rpx;white-space: nowrap;
}
.classify {height: 102rpx;/*width: 8%;*/margin-left: 42rpx;line-height: 102rpx;text-align: center;font-size: 28rpx;display: inline-block;
}.addStyleMi {height: 96rpx;border-bottom: solid 6rpx #eb3737;font-weight: bold;color: #eb3737;font-size: 28rpx;
}
/* ---------隐藏滚动条 */
::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}

微信小程序动态切换class类名相关推荐

微信小程序动态添加类名
微信小程序动态添加类名和vue的语法差不多,一个小测试 <view class="list-top"> <view data-num="1" ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
微信小程序-动态验证码
微信小程序-动态验证码一.创建自定义组件verification-code 二.在index页面使用一.创建自定义组件verification-code verification-code.js ...
学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...
微信小程序动态添加view
微信小程序动态添加view //index.html<button bindtap='clickMe'> 添加</button> <input type='input' ...
微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容例如普通用户这里不显示赛事t ...
微信小程序-动态获取appid
微信小程序动态获取appid 使用wx.getAccountInfoSync();方法. 具体实现方法如下: var accountInfo = wx.getAccountInfoSync(); va ...
微信小程序动态修改头部title
微信小程序动态修改头部title 1,正常我们设置title的名字是这么设置的 {"navigationBarTitleText": "详情", } 2.在js ...
微信小程序动态修改样式
前言微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式一.wxml <view class="fb_tips"wx:for="{{arr11 ...

微信小程序动态切换class类名

微信小程序动态切换class类名相关推荐

最新文章

热门文章