admin 管理员组文章数量: 893698
微信小程序点击更改样式
微信小程序点击更改样式-点击获得下划线
<view class="container"> <scroll-view class='headerBox' scroll-x="true"> <view class='headerItem' wx:for="{{topics}}" wx:key="index" wx:for-item="topic"> <view class='headerItemView' bindtap='clickTopItem' data-yjs="{{index}}"> <view class='{{indexSelect==index?"titleSelect":"title"}}'>{{topic.title}}</view> <view class='line' wx:if="{{indexSelect==index}}"></view> </view> </view> </scroll-view> <view class='divider'></view>
- 以上代码是wxml里面的view。wx:for遍历js代码data里面的topics,wx:for-index:指定数组当前下标的变量名,wx:for-item:指定数组当前元素的变量名。
- bindtap是点击事件 触发clickTopItem函数,data-yjs是自定义的下标。
- class=“line”为下划线的样式
.line {width: 50%;height: 10rpx;background: #2066ff;border-radius: 5rpx;
}
//index.js
//获取应用实例
const app = getApp()Page({data: {height:'500',indexSelect: 0,topics: [{id: 0,title: "精品推荐"}, {id: 1,title: "新手必看"}, {id: 2,title: "C++课程"}, {id: 3,title: "算法课程"}, {id: 4,title: "数学课程"}, {id: 5,title: "python"}]},onLoad: function() {let that = this;wx.getSystemInfo({success: function(res) {//计算屏幕的高度let buffer = (750 / res.windowWidth) * res.windowHeight-80;that.setData({height: buffer});},})},clickTopItem: function(res) {//获得传递过来的数据let id = res.currentTarget.dataset.yjs;//把index换成id,let得到的id是默认给的index值0,1,2this.setData({indexSelect: id});},
})
上面是js里面的代码
本文标签: 微信小程序点击更改样式
版权声明:本文标题:微信小程序点击更改样式 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1688191842h190207.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论