0_2046775_41f02aac57398967e345d42bfe21e7c5.jpg
最近開(kāi)發(fā)小程序的時(shí)候，需要用到echarts 評(píng)分和日歷組件旗笔，然后就去網(wǎng)上找了下彪置，皇天不負(fù)有心人總算讓我找到了幾個(gè)比較好用的。蝇恶。拳魁。
echarts
我項(xiàng)目中引入wx-charts，因?yàn)槲疫@里的需求是左右滑動(dòng)篩選數(shù)據(jù)撮弧，全部數(shù)據(jù)里面不需要柱狀圖
具體步驟：在wxs文件中因?yàn)閣x-echarts.js 聲明一個(gè)初始化echarts對(duì)象的方法潘懊，當(dāng)左右滑動(dòng)到子模塊的時(shí)候顯示調(diào)用初始化方法初始化柱狀圖。但是想虎，理想很豐滿現(xiàn)實(shí)很骨感Ｘ宰稹！
當(dāng)我篩選之后并沒(méi)有出現(xiàn)我想要的結(jié)果舌厨，打開(kāi)調(diào)試之后發(fā)現(xiàn)canvas標(biāo)簽上面多了個(gè)樣式display：none 這我就很糊涂了明明我沒(méi)加這個(gè)樣式岂却，為什么無(wú)緣無(wú)故多出來(lái)這個(gè)導(dǎo)致我canvas沒(méi)有初始化。
然后就去看了微信canvas官方文檔裙椭，
image.png
應(yīng)該是我canvas-id遍歷的時(shí)候重復(fù)了躏哩。。揉燃。修改之后就能正常顯示了
rate
話不多說(shuō)上代碼
rate.js
/**
* 1扫尺、小程序初次打開(kāi)會(huì)執(zhí)行小程序的生命周期鉤子函數(shù)：onLaunch->onShow，而且這些鉤子函數(shù)只會(huì)執(zhí)行一次炊汤。關(guān)閉小程序正驻，小程序并不會(huì)真正退出，所以執(zhí)只行了onHide抢腐。
2姑曙、頁(yè)面的初次打開(kāi)會(huì)執(zhí)行頁(yè)面的生命周期鉤子函數(shù)：onLoad->onShow->onReady，通過(guò)navigateTo離開(kāi)頁(yè)面會(huì)保留該頁(yè)面迈倍，此時(shí)只執(zhí)行onHide伤靠，其他方式離開(kāi)（包括navigateBack）都會(huì)干掉當(dāng)前頁(yè)面，此時(shí)會(huì)執(zhí)行onHide>onUnload啼染。特殊情況:switchTabTo會(huì)干掉所有非tab頁(yè)面宴合，但是保留所有已經(jīng)加載的tab頁(yè)面。
3迹鹅、包含組件的頁(yè)面卦洽，先執(zhí)行所有組件的created，再執(zhí)行所有組件的attached徒欣，然后執(zhí)行頁(yè)面的onLoad>onshow逐样，再執(zhí)行所有組件的ready，隨后執(zhí)行頁(yè)面的onReady打肝。當(dāng)頁(yè)面被卸載時(shí)脂新，先執(zhí)行頁(yè)面的onUnload，再執(zhí)行組件的detached粗梭。頁(yè)面不卸載争便，不會(huì)觸發(fā)組件的detached。
*
*/
Component({
/**
* 組件的屬性列表
*/
properties: {
// 星星評(píng)分的屬性設(shè)置
rate: {
type: Number,
value: 0
},
// 由用戶來(lái)定義星星的大小和文字的大小
starSize: {
type: Number,
value: 20, //rpx
},
fontSize: {
type: Number,
value: 20
},
fontColor: {
type: String,
value: '#ccc'
},
knowledge: {
type: String,
value: ""
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {},
/**
* 組件的方法列表
*/
methods: {
},
lifetimes: {
// 組件生命周期聲明對(duì)象断医，將組件的生命周期收歸到該字段進(jìn)行聲明滞乙，原有聲明方式仍舊有效，如同時(shí)存在兩種聲明方式鉴嗤，則lifetimes字段內(nèi)聲明方式優(yōu)先級(jí)最高
attached() {
var that = this;
//接收父組件傳入的值
let rate = that.properties.rate; //父組件傳過(guò)來(lái)的評(píng)分共10分,根據(jù)評(píng)分判斷星星數(shù)
let intRate = parseInt(rate) //取整數(shù),得到多少評(píng)分
// 除出來(lái)有可能是浮點(diǎn),所以需要求整數(shù),1分等于0.5個(gè)星星,需要除以2,得到星星個(gè)數(shù)
let light = parseInt(intRate / 2); //3個(gè)星星
let half = intRate % 2; //求半灰星,對(duì)傳入過(guò)來(lái)的評(píng)分模于2,得出半星
let gray = 5 - light - half; //一共5個(gè)星星,總星減去高亮的星星再減去一半亮亮的星星得出灰星
// 對(duì)傳過(guò)來(lái)的數(shù)據(jù)進(jìn)行遍歷,頁(yè)面顯示
let lights = [],
halfs = [],
grays = [];
for (let i = 1; i <= light; i++) {
lights.push(i)
}
for (let i = 1; i <= half; i++) {
halfs.push(i)
}
for (let i = 1; i <= gray; i++) {
grays.push(i)
}
// 對(duì)傳進(jìn)來(lái)的評(píng)分做判斷,如果為0,顯示為評(píng)分,如果評(píng)分但是是整數(shù)要保留一位小數(shù)
rate = rate && rate > 0 ? rate.toFixed(1) + `分` : "未評(píng)分";
this.setData({
lights,
halfs,
grays,
rates: rate
})
},
},
})
rate.json
{
"component": true,
"usingComponents": {}
}
<view class="rate-component-wrapper">
<view>{{knowledge}}</view>
<view class='movie-grade'>
<image style="width:{{starSize}}rpx;height:{{starSize}}rpx;" src='../../assets/images/rate/star_full.png' wx:for="{{lights}}" wx:key="item"></image>
<image style="width:{{starSize}}rpx;height:{{starSize}}rpx;" src='../../assets/images/rate/star_half.png' wx:for="{{halfs}}" wx:key="item"></image>
<image style="width:{{starSize}}rpx;height:{{starSize}}rpx;" src='../../assets/images/rate/star_default.png' wx:for='{{grays}}' wx:key="item"></image>
</view>
</view>
/* components/rate/rate.wxss */
.rate-component-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 28rpx;
padding: 20rpx 50rpx;
margin: 0 32rpx;
border-bottom: 2rpx solid #e9eff5;
}
.movie-grade {
color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.movie-grade image {
width: 38rpx !important;
height: 38rpx !important;
}
calendar
我這里日歷需要的功能是調(diào)集某個(gè)日期選中它及其前六天
用的是vantui
大家可以去官網(wǎng)看看文檔學(xué)學(xué)咋用的
image.png
