这篇博客是在上一篇博客的基础上改进的。上一篇是横向滑动列表。而点击更改字体则是在此基础上添加的新功能。直接上代码
js文件：
//获取应用实例
var lists = []
Page({
/**
* 页面的初始数据
*/
data: {
list: [],
coloritem: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
for (var i = 0; i < 15; i++) {
lists.push({
name: "第" + i + "天"
})
}
this.setData({ //获取数据成功后的数据绑定
lists: lists,
coloritem:lists[0].name
});
},
changecolor: function(event) {
var name = event.currentTarget.dataset.name;
var that = this;
console.log(name) //你点击的选项
this.setData({
coloritem: name, //点击的选项会改变颜色
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
2，xml文件：
<view>
<scroll-view scroll-x class="scroll-header">
//循环列表数据，拿到需要改变的数据这里时name
<view wx:for="{{lists}}" bindtap='changecolor' data-name="{{item.name}}">
//三元判断，根据判断的结果，显示不同的布局。
<view class="newcolor {{coloritem == item.name?'afterchange':'beforechange'}}" bindtap='changecolor' data-name="{{item.name}}">{{item.name}}</view>
</view>
</scroll-view>
</view>
3，wxss文件：
.scroll-header {
display: flex;
white-space: nowrap;
}
.scroll-header view {
height: 50rpx;
width: 200rpx;
display: inline-block;
}
.beforechange {
font-size: 40rpx;
color: #000;
display: block;
flex: 1;
text-align: center;
}
.afterchange {
font-size: 40rpx;
color: red;
display: block;
flex: 1;
text-align: center;
}
3022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
