一直以來進(jìn)行了比較多的微信小程序開發(fā)... 總會(huì)接觸到一些和官方組件或 api 相關(guān)或其無法解決的需求,于是決定在這里小小的整理一下自己的實(shí)現(xiàn)(次序不分先后) 自定義組件的使用
"注釋": "前面為組件名,后面為路徑,這里僅供參考" { "usingComponents": { "Menu": "../Components/Menu/Menu", "Loading": "../Components/Loading/Loading" } }
在組件的 js 中定義你需要的屬性名,類型及默認(rèn)值 properties: { theme: { type: String, value: 'gray' } ... }, 注意 properties 為父組件要傳入的數(shù)據(jù),組件自身狀態(tài)還是在 data 中 然后在 wxml 中引用即可 <Menu theme="{{theme}}"></Menu> 一鍵換膚先創(chuàng)建一個(gè) color.wxss 來存你的皮膚樣式(文件名和位置隨意) /* 黑色主題 */ .bg-black{ background-color: #363636; } .col-black-title{ color: #ffffff; } .col-black-name{ color: #c3c3c3; } class 名中必須帶一個(gè) 標(biāo)志 來區(qū)分不同主題,推薦使用顏色的英文名..然后在 app.wxss 中引用 // ~ 為你的文件路徑 @import '~/color.wxss'; 之后在 app.js 的 globalData 中定義一個(gè)字段儲(chǔ)存你當(dāng)前主題 globalData: { themeArr: ['gray', 'black', 'green', 'orange', 'pink', 'blue'], theme: 'black' // gray, black, green, orange, pink, blue } 然后在js里引用 app.js ,然后在 onLoad 里獲取 theme 后 setData 即可,這里貼上代碼 <Menu theme="{{theme}}"></Menu> <block wx:for="{{themeArr}}" wx:key="{{index}}"> <view class="theme-view-item bg-{{item}} select-{{item == theme}}" bindtap='changeTheme' data-theme="{{item}}" ></view> </block> .theme-view-item{ width: 80rpx; height: 40rpx; margin: 20rpx; border-radius: 10rpx; } .select-true{ transform: scale(1.2,1.2); } var app = getApp() Page({ data: { theme: '', themeArr: app.globalData.themeArr }, onLoad: function (options) { this.setData({ theme: app.globalData.theme }) }, changeTheme(e){ var theme = e.currentTarget.dataset.theme app.globalData.theme = theme this.setData({ theme: theme }) } }) 來個(gè)效果圖 這里你也可以使用 storage 來保存 theme 加載更多使用 scroll-view <scroll-view scroll-y bindscrolltolower='toLow' style="height: {{height}}px" > scroll-y 允許縱向滾動(dòng), bindscrolltolower 定義了滾動(dòng)到底部時(shí)應(yīng)該執(zhí)行的函數(shù), style 中使用了 js 中獲取的屏幕可用高度 使用 scroll-y 需要指定 scroll 的高度 onLoad: function (options) { wx.getSystemInfo({ success: (res) => { this.setData({ height: res.windowHeight }) } }) }, toLow(){ this.setData({ isLoading: true }) }, 然后在 scroll 下面放你的 loading 組件就可以了.. <scroll-view scroll-y bindscrolltolower='toLow' style="height: {{height}}px" > ...... <view hidden="{{!isLoading}}"> <Loading></Loading> </view> </scroll-view> 下拉刷新這個(gè)功能用到的都是官方的 api ,先在 app.json 中定義允許下拉刷新 "window": { ...... "enablePullDownRefresh": true } 然后在你的 js 文件中定義相應(yīng)的函數(shù) onPullDownRefresh: function () { ...... wx.stopPullDownRefresh() }, 這個(gè)點(diǎn)可以看官方文檔 自適應(yīng)rpx 單位是微信小程序中 css 的尺寸單位, rpx 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng),如在 iPhone6 上,屏幕寬度為 375px ,共有 750 個(gè)物理像素,則 750rpx = 375px = 750 物理像素, 1rpx = 0.5px = 1 物理像素 如果不懂的話不用考慮太多,在用 px 的時(shí)候?qū)⑵浯笮》妒褂?nbsp;rpx 即可 【微信小程序】——rpx、px、rem等尺寸間關(guān)系淺析 阻止事件冒泡假設(shè)有如下結(jié)構(gòu) <view class='A' bindtap='funcA'> <view class='B' bindtap='funcB'></view> </view> 我們?cè)?nbsp;A , B 上定義了兩個(gè)獨(dú)立的點(diǎn)擊事件,懂得事件冒泡的童鞋會(huì)發(fā)現(xiàn),如果點(diǎn)擊 B 的話,不僅會(huì)執(zhí)行 funcB 還會(huì)執(zhí)行 funcA ,那么如何避免這個(gè)問題? 很簡(jiǎn)單,只需要將不需要冒泡的的綁定函數(shù)改成 catchtap <view class='A' bindtap='funcA'> <view class='B' catchtap='funcB'></view> </view> 如何去掉Button的默認(rèn)邊框將 button 自帶的 position: relative 去掉即可 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)