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>

  1. 以上代码是wxml里面的view。wx:for遍历js代码data里面的topics,wx:for-index:指定数组当前下标的变量名,wx:for-item:指定数组当前元素的变量名。
  2. bindtap是点击事件 触发clickTopItem函数,data-yjs是自定义的下标。
  3. 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里面的代码

本文标签: 微信小程序点击更改样式