最近开发了微信小程序,作个小结,方便后面查阅:html
原来默认的头部导航,只能设置字体颜色,背景色,其余不能设置:在page的json文件里面配置:json
如想自定义导航头,首先须要在app.json里面加上这句:小程序
而后自定义导航头组件:通常是fixed定位。微信小程序
因此导航头下面的页面布局,须要设置一个padding-top = 自定义导航头的高度微信
接下来有个坑:就是各类手机的状态栏高度不同,须要适配:数据结构
红框部分就是状态栏高度。app
解决方法:padding-top = wx.getSystemInfoSync()['statusBarHeight'] + 自定义导航的内容高度。这样就能够适配各类手机了。函数
这个是移动端的老问题了。解决方法就是定位更高的层级设置catchtouchmove="doNothing",而该层级自己的内容滚动放在布局
scroll-view里面,scroll-view在苹果手机的滚动效果不错,安卓手机没那么流畅,可是体验也无问题。 这样层级更高的界面滑动的时候,不会使得层级更低的界面一块儿滑动了。
应用场景:通常就是侧滑等设计模型:字体
封装组件是必须的,便于代码复用。微信小程序自定义组件,必定要在该组件的json文件里面加上这句,不然会报错:
微信小程序中父组件获取子组件对象方法
1.selectComponent,返回选择器的第一个组件
2.selectAllComponents,返回选择器的组件列表
给自定义组件一个id,
使用的时候:
微信小程序写模板函数不能执行,只能写在WXS里面。
参考:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/index.html?search-key=wxs
场景;
.wxs:
var getColor = function (str) { switch(str) { case '沉默': return 'colorGray' break; case '新沉默': return 'colorGray' break; case '未激活': return 'colorLightGray' break; case '活跃降低': return 'colorRed' break; case '活跃正常': return 'colorGreen' break; default: return '' } } module.exports = { subDateTime: subDateTime getColor:getColor }
.wxml
<wxs src="../../../utils/common.wxs" module="util"/> <view class="table-cell"><span class="mul-ellipsis {{util.getColor(item.hotStateDesc)}}"
目前这个问题尚未很好的解决方法。若是要解决,多是后台协商让返回的数量少一点,或者数据结构精简一点。另外多页数据展现可能要随着滚动的时候只展现当前页,而后上拉的时候加载以前的一页,这样数据就不会随着多页下拉愈来愈多,最后卡主或者白屏。