小程序列表点击变色

工作日志随手笔记仅供参考

通过点击时候判断点击的是哪一个，然后判断item ==shopitem 使之变色

<view class='shop_list'  ><view class="shop_item{{item == shopitem?'active':''}}" wx:for="{{shop}}" bindtap='bindshop' data-classify="{{item}}" >{{item}}</view></view>

 data：{shop:['默认排序','最新上拍','即将结拍'],shopitem:'默认排序'   //默认显示的
}

 bindshop:function(event){var classify = event.currentTarget.dataset.classify;var that = this;console.log(classify)  //输出的结果就是你点击的this.setData({shopitem: classify,  //更新})},

/*商品分类  */
.shop {background: white
}
.shop_list {display: flex;padding: 30rpx 40rpx;justify-content: space-around;
}
.shop_item {font-size: 30rpx;color: #555
}
.shop_itemactive {font-size: 30rpx;color: red;
}

小程序列表点击变色相关推荐

微信小程序列表点击跳转对应详情页
2020/9/1:这种写法能实现但是用了多次缓存,后面发现其实是可以用自定义属性来传参的,具体有空我会写出来效果展示: 列表页js部分: onLoad: function(options) { va ...
小程序列表页进入详情页
小程序列表页进入详情页从列表页进入详情页,通过使用本地存储来实现,当我点击的时候,拿到这个索引,并且获取整个对象,存入内存中,然后在详情页onload中get拿到这个数据,放到页面进行展示 1.1 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
按钮点击_如何设置微信小程序按钮点击事件？
当我们需要点击按钮实现一个操作时,我们应该怎么设置?这里给大家介绍两种方法: 方法一:使用小程序模板,无需懂技术. 这种方法比较简单,你只需要选一个比较简单的小程序模板,比如「上线了」sxl.cn,在 ...
微信小程序选择框问题小程序picker点击显示object range-key=这里写要显示的字段
微信小程序选择框问题小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange="bindClass ...
小程序滑动点击切换中间大图两边小图
小程序滑动点击切换中间大图两边小图代码太老了已不建议阅读, 简单看下思路即可整体思路, 使用小程序API的animation动画和组件的canvas中的bindtouchstart.bind ...
小程序小程序列表模板
小程序列表模板今天做小程序列表页面百度搜了一圈也没有一个模板今天花了两个小时自己做了一个放图 ! 中间的隔离线在手机显示的时候颜色比较浅截图上面显示的比较深数据是死的弄成活的写for就可 ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...

小程序列表点击变色

小程序列表点击变色相关推荐

最新文章

热门文章

小程序 列表点击变色

小程序 列表点击变色相关推荐

最新文章

热门文章

小程序列表点击变色

小程序列表点击变色相关推荐