您的位置:首页 - 文章 - UniApp/uniCloud, 前端 - 正文

小程序点赞随笔

view部分

<view class="zanxin"> <view class="listImg"> <block wx:for="{{list}}" wx:key="index"> <image class="heart_img {{number == index?'active': ''}}" src="../../assets/images/zan/z{{item}}.png"></image> </block> </view>
</view>

js部分

data: { list: ['0','1', '2', '3','4','5','6', '7', '8','9','10'], number: -1,
}
//===================================== randomNum(minNum, maxNum) { console.log(1) switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); break; case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); //或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum ); break; default: return 0; break; } }, translate() { console.log(2) //80 左右 -300 上下 let randomNum = this.randomNum(-80, 80) // number是控制active的 this.setData({ number: this.data.number + 1 }, () => { if (this.data.number > 4) { this.setData({ number: -1 }) } }) // .active 是选择器 this.animate('.active', [{ opacity: 1, translateY: 0 }, { opacity: 0, translate: [randomNum, -300] }, ], 1500, function () { //动画完成后的回调函数 }.bind(this)) },

css部分

/* 点赞特效 */
.zanxin{ position: absolute; bottom: 2.5vh; right: 6.8vw; z-index: 110; width: 35px; height: 35px;
}
.listImg{ position:relative; top: 0; left: 0; width: 35px; height: 35px;
}
.heart_img{ position:absolute; top: 0; left: 0; width: 60rpx; height: 60rpx;
}

本文原创,作者:西决,其版权均为品创网络所有。如需转载,请注明出处:https://www.sxpcwlkj.com/zan/

发表评论