小程序部分組件使用wx-echarts琉历、rate、calendar

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í)很骨感X宰稹!
當(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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末斩启,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子醉锅,更是在濱河造成了極大的恐慌兔簇,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件硬耍,死亡現(xiàn)場(chǎng)離奇詭異垄琐,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)经柴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)狸窘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人坯认,你說(shuō)我怎么就攤上這事翻擒。” “怎么了牛哺?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵陋气,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我荆隘,道長(zhǎng)恩伺,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任椰拒,我火速辦了婚禮晶渠,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘燃观。我一直安慰自己褒脯,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布缆毁。 她就那樣靜靜地躺著番川,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上颁督,一...
    開(kāi)封第一講書(shū)人閱讀 52,807評(píng)論 1 314
  • 那天践啄,我揣著相機(jī)與錄音,去河邊找鬼沉御。 笑死屿讽,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的吠裆。 我是一名探鬼主播伐谈,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼试疙!你這毒婦竟也來(lái)了诵棵?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤祝旷,失蹤者是張志新(化名)和其女友劉穎履澳,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體缓屠,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡奇昙,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了敌完。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片储耐。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖滨溉,靈堂內(nèi)的尸體忽然破棺而出什湘,到底是詐尸還是另有隱情,我是刑警寧澤晦攒,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布闽撤,位于F島的核電站,受9級(jí)特大地震影響脯颜,放射性物質(zhì)發(fā)生泄漏哟旗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一栋操、第九天 我趴在偏房一處隱蔽的房頂上張望闸餐。 院中可真熱鬧,春花似錦矾芙、人聲如沸舍沙。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)拂铡。三九已至壹无,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間感帅,已是汗流浹背斗锭。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留留瞳,地道東北人拒迅。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓骚秦,卻偏偏與公主長(zhǎng)得像她倘,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子作箍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容