1.
<view class='appointent-date'>
<view class=" {{state==index?'':'active-tag'}}" bindtap="select_date"
wx:for="{{dates}}" data-key='{{index}}'>
<view class="flex-item" >
<rich-text class='data_name'>{{item.data_name}}</rich-text>
<rich-text>{{item.name}}</rich-text>
</view>
</view>
</view>
.appointent-date-div {
display: inline-block;
width: 20%;
text-align: center;
margin-top: 30rpx;
}
.flex-item {
display: inline-block;
width: 96rpx;
height: 88rpx;
font-size: 26rpx;
border: 2rpx solid #999;
text-align: center;
border-radius: 10rpx;
color: #999;
cursor: pointer;
line-height: 30rpx;
}
.data_name {
font-size: 36rpx;
line-height: 52rpx;
}
.active-tag .flex-item {
background: #c8321e;
color: #fff;
border: 1rpx solid #fff;
}
Page({
/**
4* 页面的初始数据
5 */
data: {
dates: [
{ "data_name": "11", "name": "廿四" },
{ "data_name": "12", "name": "廿五" },
{ "data_name": "13", "name": "廿六" },
{ "data_name": "14", "name": "廿七" }
],
state: ''
},
select_date: function (e) {
console.log(e.currentTarget.dataset.key);
this.setData({
state: e.currentTarget.dataset.key,
})
}
})
// 设置默认选中哪一个（不设置默认选中第一个，或者除第一个的所有）
defaultstate(){
this.setData({
state:this.data.bankdata.length+1
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.defaultstate()
},
参考网址 https://blog.csdn.net/rolan1993/article/details/78709602
