摘要:如上圖,小程序中的組件只能自定義顏色,不能自定義寬高,所以就開始了自己寫組件。自定義組件構思從父組件傳來值有高度,寬度,選中時背景,未選中背景,是否選中的狀態值寬高單位為。
如上圖,小程序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 在開發者工具中預覽
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116834.html
摘要:如上圖,小程序中的組件只能自定義顏色,不能自定義寬高,所以就開始了自己寫組件。自定義組件構思從父組件傳來值有高度,寬度,選中時背景,未選中背景,是否選中的狀態值寬高單位為。 showImg(https://segmentfault.com/img/bVbds1i?w=1744&h=926); 如上圖,小程序api中的switch組件只能自定義顏色,不能自定義寬高,所以就開始了自己寫sw...
摘要:如上圖,小程序中的組件只能自定義顏色,不能自定義寬高,所以就開始了自己寫組件。自定義組件構思從父組件傳來值有高度,寬度,選中時背景,未選中背景,是否選中的狀態值寬高單位為。 showImg(https://segmentfault.com/img/bVbds1i?w=1744&h=926); 如上圖,小程序api中的switch組件只能自定義顏色,不能自定義寬高,所以就開始了自己寫sw...
摘要:組件模板與組件數據結合后生成的節點樹,將被插入到組件的引用位置上。事件用于子組件向父組件傳遞數據,可以傳遞任意數據。官方文檔往期回顧填坑手冊小程序生成海報一拆彈時刻小程序生成海報二 showImg(https://user-gold-cdn.xitu.io/2019/6/19/16b6e94bcde767a1?w=1069&h=652&f=jpeg&s=120912); 小程序目錄結構...
閱讀 1628·2021-10-12 10:11
閱讀 3746·2021-09-03 10:35
閱讀 1438·2019-08-30 15:55
閱讀 2122·2019-08-30 15:54
閱讀 991·2019-08-30 13:07
閱讀 1003·2019-08-30 11:09
閱讀 567·2019-08-29 13:21
閱讀 2643·2019-08-29 11:32