小程序自定義switch組件

aaron 發布于2019-08-02 10:51 / 482人閱讀

摘要：如上圖，小程序中的組件只能自定義顏色，不能自定義寬高，所以就開始了自己寫組件。自定義組件構思從父組件傳來值有高度，寬度，選中時背景，未選中背景，是否選中的狀態值寬高單位為。

如上圖，小程序api中的switch組件只能自定義顏色，不能自定義寬高，所以就開始了自己寫switch組件。

自定義組件樣式

switch組件樣式大致如圖，樣式思路：未選中時為一個長方形有圓角按鈕，和一個半徑為長方形【（長方形高度／2）-1】的圓圈，當狀態為選中時，圓圈向右滾動，滾動距離為【長方形寬度-長方形高度-1】,動畫效果通過過渡屬性來賦予的，控制圓圈的left值。

自定義組件構思

從父組件傳來值有：高度height，寬度width，選中時背景bgColor，未選中背景unBgColor，是否選中的狀態值checked,寬高單位為rpx。

定義了一個組件方法，點擊時觸發該方法執行，執行后要做的事情交給父組件來處理，并且傳給父組件一個狀態值，考慮到在真實情況下會進行http請求，所以傳了一個請求成功時的回調和失敗時的回調。

組件使用

在寫demo時發現一個問題：當checked值直接在wxml中寫入false或者是true時狀態都為true,只有在js中定義data值為false,才使得狀態為false,具體原因不造，哪位大大要是知道原因，煩請告知。

！！！項目demo！！！
附鏈接：wechatide://minicode/ZErlcKmG79Em 在開發者工具中預覽

云服務器 GPU云服務器公眾號自定義菜單跳轉小程序自定義選擇組件小程序組件開發微信小程序組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52596.html

小程序自定義switch組件

摘要：如上圖，小程序中的組件只能自定義顏色，不能自定義寬高，所以就開始了自己寫組件。自定義組件構思從父組件傳來值有高度，寬度，選中時背景，未選中背景，是否選中的狀態值寬高單位為。 showImg(https://segmentfault.com/img/bVbds1i?w=1744&h=926); 如上圖，小程序api中的switch組件只能自定義顏色，不能自定義寬高，所以就開始了自己寫sw...

icyfire 2019-08-22 18:34 評論0 收藏0
小程序自定義switch組件

摘要：如上圖，小程序中的組件只能自定義顏色，不能自定義寬高，所以就開始了自己寫組件。自定義組件構思從父組件傳來值有高度，寬度，選中時背景，未選中背景，是否選中的狀態值寬高單位為。 showImg(https://segmentfault.com/img/bVbds1i?w=1744&h=926); 如上圖，小程序api中的switch組件只能自定義顏色，不能自定義寬高，所以就開始了自己寫sw...

Little_XM 2019-08-30 15:54 評論0 收藏0
小程序采坑記

摘要：小程序采坑記上手小程序兩個月，多多少少遇到一些坑，在此簡單地作下總結。但一些人可能會遇過這種情況已知小程序組件默認高度，如果子元素高度過高，不會自適應高度。但實際上真是這樣嗎其實小程序的組件表現挺奇怪的。擅長微信小程序開發，系統管理后臺。小程序采坑記上手小程序兩個月，多多少少遇到一些坑，在此簡單地作下總結。希望能對那些跟我一樣有遇到過同樣問題的人提供一點幫助，避免掉進這些坑，少走一...

miya 2019-08-23 18:32 評論0 收藏0
[填坑手冊]小程序目錄結構和component組件使用心得

摘要：組件模板與組件數據結合后生成的節點樹，將被插入到組件的引用位置上。事件用于子組件向父組件傳遞數據，可以傳遞任意數據。官方文檔往期回顧填坑手冊小程序生成海報一拆彈時刻小程序生成海報二 showImg(https://user-gold-cdn.xitu.io/2019/6/19/16b6e94bcde767a1?w=1069&h=652&f=jpeg&s=120912); 小程序目錄結構...

myshell 2019-08-23 18:13 評論0 收藏0