Heim > Artikel > WeChat-Applet > Implementieren Sie im Miniprogramm ähnliche Effekte wie die Tmall-Lotteriescheibe und das Marquee
Wenn wir E-Commerce-Aktivitäten durchführen, verwenden wir häufig Zelte, um Aufmerksamkeit zu erregen, und große Drehteller, um den Lotterieeffekt zu erzielen.
Wie können wir diesen Effekt bei der Entwicklung von WeChat-Miniprogrammen erreichen? Weitere Informationen finden Sie in der Erklärung unten.
Zu implementierende Funktionen
1. Implementieren Sie ein großes Karussell ähnlich der Tmall-Supermarkt-Lotterie
2. Klicken Sie auf START, um die Lotterie zu starten Die Lotterie ist abgeschlossen. Nach
Sehen Sie sich zuerst die Darstellungen an
1. Die blinkenden Kugeln im äußeren Kreis werden alle 500 ms geändert. Der Stil ist einfach und grob Es ist ein Problem, die Geschwindigkeit zu stoppen, wenn Sie js selbst verwenden, und die Zeit ändert sich linear Steigung zuerst und eine größere sollte eine bessere Wirkung haben
Das Folgende ist der WXML-Code der Seite:
<!--index.wxml--> <view class="container-out"> <view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view> <view class="container-in"> <view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};"> <image class="award-image" src="{{item.imageAward}}"></image> </view> <view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">START</view> </view> </view>Das Folgende ist der WXSS-Code der Seite:
/**index.wxss**/ .container-out { height: 600rpx; width: 650rpx; background-color: #b136b9; margin: 100rpx auto; border-radius: 40rpx; box-shadow: 0 10px 0 #871a8e; position: relative; } .container-in { width: 580rpx; height: 530rpx; background-color: #871a8e; border-radius: 40rpx; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /**小圆球 box-shadow: inset 3px 3px 3px #fff2af;*/ .circle { position: absolute; display: block; border-radius: 50%; height: 20rpx; width: 20rpx; } .content-out { position: absolute; height: 150rpx; width: 166.6666rpx; background-color: #f5f0fc; border-radius: 15rpx; box-shadow: 0 5px 0 #d87fde; } /**居中 加粗*/ .start-btn { position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; border-radius: 15rpx; height: 150rpx; width: 166.6666rpx; background-color: #ffe400; box-shadow: 0 5px 0 #e7930a; color: #f6251e; text-align: center; font-size: 55rpx; font-weight: bolder; line-height: 150rpx; } .award-image { position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; height: 140rpx; width: 130rpx; }Das Folgende ist der JS-Code der Seite:
//index.js //获取应用实例 var app = getApp() Page({ data: { circleList: [],//圆点数组 awardList: [],//奖品数组 colorCircleFirst: '#FFDF2F',//圆点颜色1 colorCircleSecond: '#FE4D32',//圆点颜色2 colorAwardDefault: '#F5F0FC',//奖品默认颜色 colorAwardSelect: '#ffe400',//奖品选中颜色 indexSelect: 0,//被选中的奖品index isRunning: false,//是否正在抽奖 imageAward: [ '../../images/1.jpg', '../../images/2.jpg', '../../images/3.jpg', '../../images/4.jpg', '../../images/5.jpg', '../../images/6.jpg', '../../images/7.jpg', '../../images/8.jpg', ],//奖品图片数组 }, onLoad: function () {