applet WeChat
Pembangunan program mini
Perbincangan ringkas tentang cara menggunakan program kecil untuk melaksanakan meja putar kelajuan berubah yang besar
Perbincangan ringkas tentang cara menggunakan program kecil untuk melaksanakan meja putar kelajuan berubah yang besar
Dec 20, 2021 am 10:07 AM
怎么使用小程序?qū)崿F(xiàn)一個(gè)變速大轉(zhuǎn)盤？下面本篇文章給大家介紹一下使用小程序?qū)崿F(xiàn)一個(gè)變速大轉(zhuǎn)盤的方法，希望對(duì)大家有所幫助！
使用小程序來實(shí)現(xiàn)一個(gè)大轉(zhuǎn)盤吧！大轉(zhuǎn)盤都不陌生，開始抽獎(jiǎng)，然后停止的位置就是獲得的獎(jiǎng)品。
實(shí)現(xiàn)方法：setInterval
先來實(shí)現(xiàn)一下勻速大轉(zhuǎn)盤吧
先將轉(zhuǎn)盤設(shè)計(jì)好，比如3?x?3?的大轉(zhuǎn)盤，中間是個(gè)開始按鈕;
我這里設(shè)置的是背景顏色的變化，當(dāng)抽獎(jiǎng)到達(dá)某個(gè)位置時(shí)，這個(gè)位置的顏色發(fā)生變化；
先貼一下我的ttml頁(yè)面吧（不要在意我奇怪的配色~）
//?index.ttml
<view class="container">
????<view class="box">
????????<view class="item" style="background-color: {{ index == 4 ? 'red': (index == active ? 'rgb(229, 250, 250)' : 'rgb(236, 216, 135)')}};" tt:for="{{games}}" bindtap="{{index == 4 ? 'beginLottery' : ''}}">{{item}}</view>
????</view>
</view>
順便css也貼一下吧，看效果直接復(fù)制就好了嘛
//?index.ttss
.box{
????margin:?0?auto;
????width:?600rpx;
????display:?flex;
????flex-wrap:?wrap;
????border:?1px?solid?black;
}
.item{
????width:?200rpx;
????height:?200rpx;
????line-height:?200rpx;
????text-align:?center;
}
另起一行，只是換個(gè)位置貼js
- 先看data：games是轉(zhuǎn)盤上要顯示的內(nèi)容，轉(zhuǎn)盤的格式可以根據(jù)自己的需求自己來寫，我這個(gè)就是最基本的。active用來記錄旋轉(zhuǎn)到了什么位置,start用來記錄開始的位置
- 再來看全局定義的round和timer。round用來設(shè)置一個(gè)軌跡，相當(dāng)于鋪路啦，里面是要走的下標(biāo)，剛好是外圍一圈。timer是定時(shí)器
- 最后看begin方法吧
// index.js
const round = [0,1,2,5,8,7,6,3,0];
let timer ;
Page({
data: {
games:['$1','$2','$3','$4','開始','$5','$6','$7','$8'],
active: 0,
start: 0,
},
onLoad: function (options) {
},
beginLottery(){
this.begin();
},
// begin
begin(){
let start = this.data.start;
let random = Math.floor(Math.random()*9);
let num = 0;
timer = setInterval(() => {
start++;
start = start > 8 ? 0 : start;
this.setData({
start,
active: round[start]
})
num++;
if(num > 24 && this.data.active == random){//
clearInterval(timer)
}
}, 70);
}
})比較簡(jiǎn)單，然后實(shí)現(xiàn)變速，其實(shí)速度的改變就是旋轉(zhuǎn)一圈時(shí)間的改變
我這里的設(shè)計(jì)是：每旋轉(zhuǎn)兩圈實(shí)現(xiàn)一次變速，每次變速的時(shí)間在上一次時(shí)間上+100s，在第五圈停止
//index.js
const round = [0, 1, 2, 5, 8, 7, 6, 3, 0];
let timer; // 定時(shí)器
let num = 0; // 用來記錄一共轉(zhuǎn)了幾次，方便判斷轉(zhuǎn)的圈數(shù)
let start = 0; // 記錄開始的位置下標(biāo)
let random = ''; // 記錄停下來的隨機(jī)數(shù)（下標(biāo)）
let time = 70; // 記錄定時(shí)器的時(shí)間
let count = 0; // 記錄圈數(shù)，用來判斷每2圈一次變速
Page({
data: {
games: ['$1', '$2', '$3', '$4', '開始', '$5', '$6', '$7', '$8'],
active: 0,
},
onLoad: function (options) {},
beginLottery() {
this.begin1();
},
begin1() {
if(num != 0){
// 防止用戶重復(fù)點(diǎn)擊
return
}
timer = setInterval(this.process, time);
},
// 旋轉(zhuǎn)的過程
process() {
start = start + 1;
if (start >= 8) {
start = 0;
// 當(dāng)start = 8的時(shí)候，表示已經(jīng)轉(zhuǎn)過1圈了count+1
count = count + 1;
}
this.setData({
active: round[start]
})
num = num + 1;
// 實(shí)現(xiàn)兩圈一次變速
if (num % 8 === 0 && count === 2) {
count = 0;
clearInterval(timer);
time = time + 100;
timer = setInterval(this.process, time);
// 轉(zhuǎn)了4圈,即將在第五圈停止
if (Math.floor(num / 8) === 4) {
this.getRandom();
}
}
if (this.data.active === random) {
clearInterval(timer);
num = 0;
random = '';
time = 70;
count = 0;
}
},
getRandom(){
let n = Math.floor(Math.random() * 9);
if(n == 4){
this.getRandom();
}else{
random = n
return;
}
}
})示例代碼是根據(jù)旋轉(zhuǎn)的圈數(shù)來進(jìn)行變速，也可以根據(jù)旋轉(zhuǎn)一定的時(shí)間來實(shí)現(xiàn)變速，這樣就需要使用setTimeout來實(shí)現(xiàn)。
好啦，這次記錄就到這里啦，有更好的解決方案，性能優(yōu)化 歡迎評(píng)論！
【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】
Atas ialah kandungan terperinci Perbincangan ringkas tentang cara menggunakan program kecil untuk melaksanakan meja putar kelajuan berubah yang besar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bangunkan applet WeChat menggunakan Python
Jun 17, 2023 pm 06:34 PM
Dengan populariti teknologi Internet mudah alih dan telefon pintar, WeChat telah menjadi aplikasi yang sangat diperlukan dalam kehidupan orang ramai. Program mini WeChat membenarkan orang ramai menggunakan program mini secara langsung untuk menyelesaikan beberapa keperluan mudah tanpa memuat turun dan memasang aplikasi. Artikel ini akan memperkenalkan cara menggunakan Python untuk membangunkan applet WeChat. 1. Persediaan Sebelum menggunakan Python untuk membangunkan applet WeChat, anda perlu memasang perpustakaan Python yang berkaitan. Adalah disyorkan untuk menggunakan dua perpustakaan wxpy dan itchat di sini. wxpy ialah mesin WeChat
Laksanakan kesan flip kad dalam program mini WeChat
Nov 21, 2023 am 10:55 AM
Melaksanakan kesan flipping kad dalam program mini WeChat Dalam program mini WeChat, melaksanakan kesan flipping kad ialah kesan animasi biasa yang boleh meningkatkan pengalaman pengguna dan daya tarikan interaksi antara muka. Yang berikut akan memperkenalkan secara terperinci cara melaksanakan kesan khas flipping kad dalam applet WeChat dan memberikan contoh kod yang berkaitan. Pertama, anda perlu menentukan dua elemen kad dalam fail susun atur halaman program mini, satu untuk memaparkan kandungan hadapan dan satu untuk memaparkan kandungan belakang Kod sampel khusus adalah seperti berikut: <!--index.wxml-. ->&l
Alipay melancarkan program mini 'Chinese Character Picking-Rare Characters' untuk mengumpul dan menambah pustaka aksara yang jarang ditemui
Oct 31, 2023 pm 09:25 PM
Menurut berita dari laman web ini pada 31 Oktober, pada 27 Mei tahun ini, Ant Group mengumumkan pelancaran "Projek Pemilihan Watak Cina", dan baru-baru ini membawa kemajuan baharu: Alipay melancarkan program mini "Pemilihan Watak Cina-Watak Biasa" untuk mengumpul koleksi daripada masyarakat Watak nadir menambah pustaka aksara jarang dan memberikan pengalaman input yang berbeza untuk aksara jarang untuk membantu memperbaik kaedah input aksara jarang dalam Alipay. Pada masa ini, pengguna boleh memasukkan applet "Watak Tidak Biasa" dengan mencari kata kunci seperti "Pengambilan aksara Cina" dan "aksara jarang". Dalam program mini, pengguna boleh menghantar gambar aksara jarang yang belum dikenali dan dimasukkan oleh sistem Selepas pengesahan, jurutera Alipay akan membuat entri tambahan ke dalam perpustakaan fon. Laman web ini mendapati bahawa pengguna juga boleh mengalami kaedah input pemisahan perkataan terkini dalam program mini Kaedah input ini direka untuk perkataan yang jarang dengan sebutan yang tidak jelas. Pembongkaran pengguna
Bolehkah program kecil menggunakan tindak balas?
Dec 29, 2022 am 11:06 AM
Program mini boleh menggunakan react. Cara menggunakannya: 1. Laksanakan pemapar berdasarkan "react-reconciler" dan jana DSL 2. Buat komponen program mini untuk menghuraikan dan membuat DSL 3. Pasang npm dan laksanakan Build; npm dalam alat; 4. Perkenalkan pakej ke halaman anda sendiri, dan kemudian gunakan API untuk menyelesaikan pembangunan.
Cara uniapp mencapai penukaran pantas antara program mini dan H5
Oct 20, 2023 pm 02:12 PM
Bagaimana uniapp boleh mencapai penukaran pantas antara program mini dan H5 memerlukan contoh kod khusus Dalam beberapa tahun kebelakangan ini, dengan perkembangan Internet mudah alih dan populariti telefon pintar, program mini dan H5 telah menjadi bentuk aplikasi yang sangat diperlukan. Sebagai rangka kerja pembangunan merentas platform, uniapp boleh dengan cepat merealisasikan penukaran antara program kecil dan H5 berdasarkan set kod, meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan cara uniapp boleh mencapai penukaran pantas antara program mini dan H5, dan memberikan contoh kod khusus. 1. Pengenalan kepada uniapp unia
Ajar anda cara menggunakan mesej templat akaun awam dalam program mini (dengan idea terperinci)
Nov 04, 2022 pm 04:53 PM
Artikel ini membawakan kepada anda beberapa isu berkaitan tentang program mini WeChat terutamanya cara menggunakan mesej templat akaun dalam program mini. Saya harap ia dapat membantu semua orang.
Tutorial menulis program sembang mudah dalam Python
May 08, 2023 pm 06:37 PM
Idea pelaksanaan x01 Penubuhan pelayan Pertama, pada bahagian pelayan, soket digunakan untuk menerima mesej Setiap kali permintaan soket diterima, utas baharu dibuka untuk menguruskan pengedaran dan penerimaan mesej Pada masa yang sama, terdapat pengendali untuk menguruskan semua Thread, dengan itu merealisasikan pemprosesan pelbagai fungsi ruang sembang Penubuhan pelanggan x02 adalah lebih mudah daripada pelayan Fungsi pelanggan hanya untuk menghantar dan menerima mesej, dan untuk memasukkan aksara tertentu mengikut peraturan tertentu. Ini membolehkan penggunaan fungsi yang berbeza, di sisi pelanggan, anda hanya perlu menggunakan dua utas, satu didedikasikan untuk menerima mesej, dan yang lain didedikasikan untuk menghantar mesej adalah kerana, hanya
Kedudukan geografi dan paparan peta menggunakan PHP dan program mini
Jul 04, 2023 pm 04:01 PM
Kedudukan geolokasi dan paparan peta PHP dan program mini Kedudukan geolokasi dan paparan peta telah menjadi salah satu fungsi yang diperlukan dalam teknologi moden. Dengan populariti peranti mudah alih, permintaan orang ramai untuk kedudukan dan paparan peta juga meningkat. Semasa proses pembangunan, PHP dan applet adalah dua pilihan teknologi biasa. Artikel ini akan memperkenalkan anda kepada kaedah pelaksanaan kedudukan lokasi geografi dan paparan peta dalam program PHP dan mini, serta melampirkan contoh kod yang sepadan. 1. Geolokasi dalam PHP Dalam PHP, kita boleh menggunakan geolokasi pihak ketiga
