其实吧,这个也没啥,就无聊写写的,本来打算使用rich-text来实现,但是很难试下渐变的效果,也就改用view了,代码没啥注意点,就直接黏上来吧
wxss:
.myi {
width: 100%;
box-sizing: border-box;
padding-left:10%;
margin-top: 400rpx;
height: 200rpx;
text-align: center;
}
.myi view {
transition: all 0.5s;
width: 1%;
margin-left: 1.5%;
margin-right: 1.5%;
height: 200rpx;
background-color: #aaa;
float: left;
}
html:
<view class='myi'>
<view wx:for="{{radomheight}}" style='height:{{item}}rpx;margin-top:-{{item/2}}rpx'></view>
<view style='clear:both;width:0;height:0;'></view>
</view>
js:
Page({
/**
* 页面的初始数据
*/
data: {
radomheight: [200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.myradom();
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
//我的随机数
myradom: function () {
const that = this;
var _radomheight = that.data.radomheight;
console.log(that.data.radomheight);
for (var i = 0; i < that.data.radomheight.length; i++) {
//+1是为了避免为0
_radomheight[i] = (200 * Math.random().toFixed(2))+10;
}
that.setData({
radomheight: _radomheight
});
setTimeout(function () {that.myradom(); }, 500);
}
})