摘要:如上圖,小程序中的組件只能自定義顏色,不能自定義寬高,所以就開始了自己寫組件。自定義組件構(gòu)思從父組件傳來值有高度,寬度,選中時背景,未選中背景,是否選中的狀態(tài)值寬高單位為。
如上圖,小程序api中的switch組件只能自定義顏色,不能自定義寬高,所以就開始了自己寫switch組件。
自定義組件樣式
switch組件樣式大致如圖,樣式思路:未選中時為一個長方形有圓角按鈕,和一個半徑為長方形【(長方形高度/2)-1】的圓圈,當(dāng)狀態(tài)為選中時,圓圈向右滾動,滾動距離為【長方形寬度-長方形高度-1】,動畫效果通過過渡屬性來賦予的,控制圓圈的left值。
自定義組件構(gòu)思
從父組件傳來值有:高度height,寬度width,選中時背景bgColor,未選中背景unBgColor,是否選中的狀態(tài)值checked,寬高單位為rpx。
定義了一個組件方法,點擊時觸發(fā)該方法執(zhí)行,執(zhí)行后要做的事情交給父組件來處理,并且傳給父組件一個狀態(tài)值,考慮到在真實情況下會進(jìn)行http請求,所以傳了一個請求成功時的回調(diào)和失敗時的回調(diào)。
組件使用
在寫demo時發(fā)現(xiàn)一個問題:當(dāng)checked值直接在wxml中寫入false或者是true時狀態(tài)都為true,只有在js中定義data值為false,才使得狀態(tài)為false,具體原因不造,哪位大大要是知道原因,煩請告知。
?。?!項目demo!??!
附鏈接:wechatide://minicode/ZErlcKmG79Em 在開發(fā)者工具中預(yù)覽
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/52596.html
摘要:如上圖,小程序中的組件只能自定義顏色,不能自定義寬高,所以就開始了自己寫組件。自定義組件構(gòu)思從父組件傳來值有高度,寬度,選中時背景,未選中背景,是否選中的狀態(tài)值寬高單位為。 showImg(https://segmentfault.com/img/bVbds1i?w=1744&h=926); 如上圖,小程序api中的switch組件只能自定義顏色,不能自定義寬高,所以就開始了自己寫sw...
摘要:如上圖,小程序中的組件只能自定義顏色,不能自定義寬高,所以就開始了自己寫組件。自定義組件構(gòu)思從父組件傳來值有高度,寬度,選中時背景,未選中背景,是否選中的狀態(tài)值寬高單位為。 showImg(https://segmentfault.com/img/bVbds1i?w=1744&h=926); 如上圖,小程序api中的switch組件只能自定義顏色,不能自定義寬高,所以就開始了自己寫sw...
摘要:組件模板與組件數(shù)據(jù)結(jié)合后生成的節(jié)點樹,將被插入到組件的引用位置上。事件用于子組件向父組件傳遞數(shù)據(jù),可以傳遞任意數(shù)據(jù)。官方文檔往期回顧填坑手冊小程序生成海報一拆彈時刻小程序生成海報二 showImg(https://user-gold-cdn.xitu.io/2019/6/19/16b6e94bcde767a1?w=1069&h=652&f=jpeg&s=120912); 小程序目錄結(jié)構(gòu)...
閱讀 3914·2021-09-10 11:22
閱讀 2385·2021-09-03 10:30
閱讀 3699·2019-08-30 15:55
閱讀 1970·2019-08-30 15:44
閱讀 870·2019-08-30 15:44
閱讀 620·2019-08-30 14:04
閱讀 3079·2019-08-29 17:18
閱讀 1300·2019-08-29 15:04