mp progress
支持在wepy中是用api方式
Alat yang berfokus pada penerapan bilah kemajuan melingkar dalam program kecil
Program mini saat ini memiliki banyak komponen UI pihak ketiga, yang pada dasarnya diperkenalkan dan digunakan dalam bentuk komponen. Jika gaya proyek lebih mirip dengan pihak ketiga, maka kumpulan lengkap pustaka komponen pihak ketiga ini lebih nyaman. jika Anda hanya menggunakan komponen tertentu dari perpustakaan UI pihak ketiga. Jika demikian, tidak masuk akal untuk menginstal perpustakaan yang sangat besar.
Ukuran file target mp-progress kurang dari 7KB. Metode panggilan js yang mudah digunakan dan metode penulisan tag kanvas asli sangat cocok untuk proyek yang ingin mempertahankan kontrol tingkat tinggi.
$ npm install mp-progress --save
Menurut persyaratan dokumen, pustaka dasar versi 2.7.0 dan yang lebih baru didukung. Efek terbaiknya adalah menggunakan pustaka dasar terbaru.
Menggunakan applet asli WeChat untuk memperkenalkan paket npm memerlukan konfigurasi tambahan. Untuk detailnya, silakan lihat https://developers.weixin.qq.com/community/develop/article/doc/0008aecec4c9601e750be048d51c13
Perkenalkan komponen di halaman terkait, inisialisasi data dan gunakan komponen di wxml
Karena perbedaan implementasi komponen, metode ini tidak berlaku di wepy
{
"navigationBarTitleText": "首页",
"usingComponents": {
"mpProgress": "mp-progress/dist/component/mp-progress"
}
}
...
// 参数使用方式相同，canvasSize默认是400*400
data = {
config: {
canvasSize: {
width: 400,
height: 400
},
percent: 100,
barStyle: [{width: 20, fillStyle: '#f0f0f0'}, {width: 20, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}],
needDot: true,
dotStyle: [{r: 20, fillStyle: '#ffffff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]
},
percentage: 10
}
...
<mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>
Metode ini mengikuti prinsip pengikatan data dua arah. Ketika persentase halaman berubah, mp-progress akan secara otomatis memperbarui tampilan.
Metode ini cocok untuk wepy, tetapi harus diinisialisasi dalam fungsi panggilan balik onReady.
Satuan yang diteruskan adalah rpx , yaitu jika lebar kanvas 400rpx, maka 400 diteruskan, dan ukuran sebenarnya akan dihitung secara otomatis nanti.
import MpProgress from 'mp-progress';
...
// 初始化
// 注意：在wepy中必须在onReady里调用
const mprogress = new MpProgress({
target: this,
canvasId: 'progress',
canvasSize: {width: 400, height: 400},
barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}]
});
// 开始绘制进度，60代表60%
mprogress.draw(60);
...
<canvas class="canvas" type="2d" id="progress"></canvas>
| Memengaruhi | menguraikan |
|---|---|
 | Mode normal (standar) |
 | Mode persentase (Anda hanya perlu memasukkan persentase sesuai kebutuhan, lihat deskripsi parameter) |
| Nama parameter | tipe data | Parameter yang diperlukan | menguraikan | Daftar |
|---|---|---|---|---|
| target | Obyek | Ya | Konteks halaman | ini |
| CanvasId | Rangkaian | Ya | Id kanvas halaman | kemajuan |
| ukuran kanvas | Obyek | Ya | Ukuran kanvas, satuannya adalah rpx, Anda hanya perlu memasukkan nomornya | {lebar: 200, tinggi: 300} |
| persen | Nomor | TIDAK | Secara default, lingkaran dihitung dan ditampilkan menurut 360 derajat. Jika 80% dilewatkan, busur setengah lingkaran maksimum akan otomatis digambar berdasarkan ukuran kanvas. | 100 |
| gaya bar | Himpunan | Ya | Gaya kemajuan busur dirender berdasarkan urutan posisi elemen array. Umumnya, konfigurasi elemen pertama adalah warna latar belakang yang menutupi seluruh busur, dan konfigurasi elemen kedua adalah merender busur sesuai dengan persentase kemajuan. fillStyle bisa berupa warna normal atau warna gradien. Untuk menggunakan warna gradien, Anda perlu memasukkan informasi posisi dan warna setiap titik dalam format array. | [{lebar: 12, gaya isi: '#f0f0f0'}, {lebar: 12, bernyawa: benar, gaya isi: [{posisi: 0, warna: '#56B37F'}, {posisi: 1, warna: '#c0e674' }]}] |
| perluDot | Boolean | TIDAK | Apakah Anda perlu menampilkan poin kemajuan? | PALSU |
| gaya titik | Himpunan | TIDAK | Konfigurasi gaya titik kemajuan mendukung hingga dua gaya overlay Untuk memastikan tampilan titik kemajuan yang jelas, titik pertama menambahkan bayangan secara default. Jika diameter titik kemajuan pertama lebih besar dari bilah kemajuan, untuk memastikan bahwa titik kemajuan ditampilkan sepenuhnya di kanvas, lingkaran bilah kemajuan yang digambar harus dikurangi dengan perbedaan yang sesuai, di mana bayangan adalah konfigurasi opsional, dan nilai bayangannya adalah (0, 0, r/2, shadow) | dotStyle: [{r: 24, fillStyle: '#fff', bayangan: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}] |
Mengingat bilah kemajuan dapat diperbarui beberapa kali pada suatu halaman, setelah komponen dipakai, Anda perlu memanggil metode draw secara manual untuk menggambar.
| Nama parameter | tipe data | Parameter yang diperlukan | menguraikan |
|---|---|---|---|
| persentase | Nomor | Ya | Persentase busur, misalnya, jika 60 diteruskan, hanya 60% sisa busur yang akan ditampilkan berlawanan arah jarum jam. |
Cara mengatur gaya titik akhir busur
Parameter lineCap dapat ditambahkan ke item parameter apa pun di barStyle , misalnya: barStyle: [{width: 12, lineCap: 'round', fillStyle: '# lineCap '}].
Harus dijalankan pada SDK versi 2.7.0 atau lebih tinggi
Komponen ini telah mengadopsi metode rendering lapisan sama terbaru dari WeChat, yang mengharuskan versi SDK minimal 2.7.0
gaya titik
Jika dotStyle berisi bayangan, untuk memastikan bayangan dapat ditampilkan sepenuhnya di seluruh area lingkaran, radius bilah kemajuan akan dikurangi secara otomatis.
animasi kemajuan
Saat ini animasi hanya berfungsi dalam definisi elemen terakhir barStyle, dan animasi setiap frame adalah 2% dari total animasi.
Efek tampilan teks
Untuk kode implementasi, silakan merujuk ke:
<view class="garage-status">
<canvas class="canvas" type="2d" id="progress"></canvas>
<view class="status-ctn">
<view class="status-count">127/127</view>
<view class="desc-text">适用车位剩余</view>
</view>
</view>
Umpan balik masalah
