我们一直在开发很多微信小程序.我们总是会接触到一些与官方组件或API相关的需求，或者是无法解决的需求，所以我们决定在这里整理一下我们的实现(没有特别的顺序)。

自定义组件的使用

创建右键单击创建新组件

引用是在您需要引用的文件的json中定义的。

注意“:”的前面是组件名，后面是路径，路径仅供使用“组件”菜单“:”时参考./组件/菜单/菜单'，'加载' 3360 './components/loading/loading'}。

属性： {主题： {类型3360字符串，值： '灰色' }.}，请注意，properties是父组件要传入的数据，而组件自己的状态仍然在数据中。

然后用wxml引用它。

菜单主题=' {{theme}}'/Menu

一键换肤

创建一个color.wxss来存储您的皮肤样式(文件名和位置是任意的)

/*黑色主题*/。BG-黑色{背景色： # 363636；}.col-black-title { color : # ffffff；}.col-black-name { color : # c3c3；} class的名称必须有一个符号来区分不同的主题。建议使用颜色的英文名称.然后在app.wxss中引用它

//~是您的文件路径@ import ' ~/color . wxss '；然后在app.js的globalData中定义一个字段来存储你当前的主题。

global : { thema arr :['灰色'，'黑色'，'绿色'，'橙色'，'粉色'，'蓝色']，Theme: '黑色'//灰色，黑色，绿色，橙色，粉色，蓝色}然后参考js中的app。

菜单主题=' { {主题} } '/Menublock wx : for=' { {主题} } ' wx:key=' { {索引} } ' view class=' theme-view-item BG-{ { item } } select-{ { item==theme } } ' bind tap=' change theme ' data-theme=' { { item } } '/view/block . theme-view-item { width 3360 80 rpx；height: 40rpxmargin: 20rpxborder-radius : 10 rpx；}.select-true { transform : scale(1.2，1.2)；} var app=getApp()Page({ data : { them : ' '，themarr : app . global data . themarr }，onLoad:函数(选项){ this . setdata({ them : app . global data . theme })}，Change theme(e){ var theme=e . current target . dataset . theme app . global data . theme=them . setdata({ them 3360 theme })}来个效果图。

您也可以在这里使用存储来保存主题。

加载更多

使用滚动视图

scroll-view scroll-y bindscrolltolower=' tolow ' style=' height 3360 { { height } } px ' scroll-y允许垂直滚动。BindScrollTolower定义了滚动到底部时应该执行的函数。样式中使用了js中获得的可用屏幕高度。

要使用scroll-y，您需要指定滚动条的高度。

onLoad:函数(选项){ wx . getsystem info({ success :(RES)={ this . setdata({ height : RES . window height })} })}，Tolow () {this。setdata({ isload : true })}，然后将加载组件放在卷轴下。

scroll-view scroll-y bindscrolltolower=' ToLow ' style=' height : { { height } } px '.视图隐藏='{{！正在加载}} '加载/加载/查看/滚动-查看

下拉刷新

此函数使用官方api。首先，它在app.json中定义为允许下拉刷新。

窗口“: { .”启用下拉刷新' : true}然后在js文件中定义相应的函数。

Onldownrefresh :函数(){ 0.wx.stoppulldownrefresh，这一点请参考官方文档。

自适应

rpx单位是微信小程序中css的大小单位，rpx可以根据屏幕宽度自适应。比如在iPhone6上，屏幕宽度是375px，有750个物理像素，那么750rpx=375px=750个物理像素，1rpx=0.5px=1个物理像素。

不懂就不要想太多。使用px时，将其大小加倍并使用rpx。

【微信小程序】——rpx、px、rem等维度关系分析

阻止事件冒泡

采用以下结构

view class=' a ' bind tap=' funcA ' view class=' b ' bind tap=' funcB '/view/view我们在a和b上定义了两个独立的点击事件，知道冒泡事件的童鞋会发现，如果你点击b，不仅会执行FuncB，还会执行FuncA，那么如何避免这个问题呢？

很简单，只需要把不需要冒泡的绑定函数改成catchtap。

view class=' a ' bind tap=' funca ' view class=' b ' catch tap=' funcb '/view/view

如何去掉Button的默认边框

只需移除按钮自身的位置3360Relative即可。