<view class="listImg">
?? ?<block wx:for="{{list}}" wx:key="index">
? ? ? ? <image class="heart_img {{number == index?'active': ''}}" ?src="../../utils/image/{{index+1}}.png"></image>
?? ?</block>
</view>
<view class="click" bindtap="translate">點(diǎn)贊</view>

.listImg{
? ? position: relative;
? ? width: 100px;
? ? height: 300px;
? ? border: 2rpx solid red;
}
.heart_img{
? ? width: 100rpx;
? ? height: 100rpx;
? ? display: block;
? ? opacity: 0;
? ? position: absolute;
? ? left: 26rpx;
? ? transform:translateX(-50%);
? ? bottom: 0;
? ??
}
click{
? ? color: #000;
}

data: {
? ? ? ? list: 9,
? ? ? ? number: -1
? ? },
??
? randomNum(minNum, maxNum) {
? ? ? ? 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() {
? ? ? let self = this;
? ? ? ? // 隨機(jī)數(shù)
? ? ? ? let randomNum = this.randomNum(-30, 30);
? ? ? ? let number = this.data.number+1;
? ? ? ? console.log(number)
? ? ? ? // number是控制active的
? ? ? ? this.setData({
? ? ? ? ? number:number > 9 ? 0:number
? ? ? ? })
? ? ? ? // .active 是選擇器
? ? ? ? this.animate('.active', [{
? ? ? ? ? ? opacity: 1,
? ? ? ? ? ? translateY: 0,
? ? ? ? ? ? ease:'else',
? ? ? ? ? ? scale: [.6, .6]
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? scale: [1, 1],
? ? ? ? ? ? translate: [randomNum, -300]
? ? ? ? ? },
? ? ? ? ], 1500, function () {
? ? ? ? ? //動(dòng)畫完成后的回調(diào)函數(shù)
? ? ? ? }.bind(this))
? ?},