1、局部滑动
实现局部滑动不一定需要使用Scroll-view,可以采用（position:fixed;）使不需要滑动的其中一部分固定，其余部分pages中的内容是自己可以滚动的；
2、避免多次点击
方法一：使用限制按钮或控件的点击时间间隔的方式处理。
JS代码
Page({
data: {
buttonClicked: false, //避免多次点击
},
//在需要点击的事件中调用buttonClicked函数
click: function (e) {
this.buttonClicked(this);
},
})
... ...
//避免多次点击
buttonClicked: function () {
var that = this;
this.setData({
buttonClicked: true,
});
setTimeout(function () {
that.setData({
buttonClicked: false,
});
}, 2000);
},
wxml代码
//为view标签时的写法与//为button 标签时的写法不同
<view bindtap="{{!buttonClicked?'click':''}}"" />
<button bindtap="{{!buttonClicked?'click':''}}" />
<button bindtap="click" disabled="buttonClicked" />
方法二：使用 wx.showLoading 在请求执行之前显示一个加载框，请求完成后再关闭加载框。
JS代码
showLoading:function(message) {
if (wx.showLoading) {
// 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
wx.showLoading({
title: message,
mask: true
});
} else {
// 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
wx.showToast({
title: message,
icon: 'loading',
mask: true,
duration: 20000
});
}
}
hideLoading:function() {
if (wx.hideLoading) {
// 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
wx.hideLoading();
} else {
wx.hideToast();
}
}
3、swiper禁止手动滑动
[链接]（https://www.jianshu.com/p/5c34d60bc81f）
只需在swiper-slide外层容器加一行css代码，无需引用任何swiper相关css文件。
.swiper-container{
pointer-events: none;
}
4、微信小程序自定义组件传值 页面和组件相互传数据操作示例
① 将组件中数据传到页面去
在页面中定义组件 ，json文件中记得加上
{
"usingComponents": {
"showModel": "/components/showModel/showModel"
}
}
页面中引用组件bind：showModalSuccess="showModalSuccess"
<showModel id="showModal" bind：showModalSuccess="showModalSuccess" showModal="{{showModal}}" ></showModel>
到组件
// 与页面衔接 触发页面中的方法并传数据，res.data就是组件中请求到的数据；
this.triggerEvent("showModalSuccess", res.data);
回到index.js，e.detail就能获取到组件中的res.data的数据啦~
showTab:function(e){
console.log('this is showtabBar');
console.log(e.detail);
},
② 将页面中数据传到组件中去
页面中引用组件
<showModel id="showModal" show="{{userShow}}"></showModel>
取到我们从页面中传入的值
properties: { //对外属性，即如果外部的wxml文件传入数据时，会把数据设置成properties的属性
'show':{
type:Boolean,
value:'',
observer: function (newVal, oldVal) {
console.log(newVal)
}
},
},
ready:function(){
console.log(this.properties);
},
5、商品列表双列渲染
flex弹性布局
display: flex; /**指定flex 布局*/
flex-wrap:wrap; /**不够了就换行*/
6、微信小程序回到顶部的两种方法
①使用view形式的回到顶部
HTML
<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
CSS
/* 返回顶部 */
.goTop{
height: 80rpx;
width: 80rpx;
position: fixed;
bottom: 50rpx;
background: rgba(0,0,0,.3);
right: 30rpx;
border-radius: 50%;
}
JS
// 获取滚动条当前位置
onPageScroll: function (e) {
console.log(e)
if (e.scrollTop > 100) {
this.setData({
floorstatus: true
});
} else {
this.setData({
floorstatus: false
});
}
},
//回到顶部
goTop: function (e) { // 一键回到顶部
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
},
②使用scroll-view形式的回到顶部
HTML
<scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
CSS
/* 返回顶部 */
.goTop{
height: 80rpx;
width: 80rpx;
position: fixed;
bottom: 50rpx;
background: rgba(0,0,0,.3);
right: 30rpx;
border-radius: 50%;
}
JS
data:{
topNum: 0
}
// 获取滚动条当前位置
scrolltoupper:function(e){
console.log(e)
if (e.detail.scrollTop > 100) {
this.setData({
floorstatus: true
});
} else {
this.setData({
floorstatus: false
});
}
},
//回到顶部
goTop: function (e) { // 一键回到顶部
this.setData({
topNum: this.data.topNum = 0
});
},
7、下拉刷新事件无效原因
相关链接
1.页面json文件中没有开启enablePullDownRefresh配置
2.请在真机调试中调试（开发工具下拉事件监听不到）
tip: q:有下拉页面移动效果，没有刷新加载动画
a:加载动画颜色跟背景色重叠，设置json文件"backgroundTextStyle": “dark”
q:下拉后页面不返回顶部
a:没有调用结束下拉刷新动画方法
JS
onPullDownRefresh: function () {
console.log('下拉')
wx.startPullDownRefresh()
setTimeout(()=>{
wx.stopPullDownRefresh()
},2000)
}
JSON
{
"backgroundTextStyle": "dark",
"enablePullDownRefresh": true
}
8、小技巧
①在画页面前，可以在app.wxss中先定义好一些全局样式，例如主题色，边框颜色等，②小程序的tabBar的样式可以在app.json文件中进行设置，③页面上方的标题可以在页面的.json文件中设置是否有，如果不设置则是默认，设置为custom为自定义，只保留右上角胶囊按钮。
"navigationStyle":"custom",
④背景颜色渐变属性：background-image，⑤画页面时最好先想一些布局，最好不要用太多z-index样式来改变容器的布局，可以利用样式覆盖的效果，将层级高的容器写在后面，层级底的容器写在前面，⑥CSS3动画效果,在页面的样式文件中加animation样式，例如：animation: myfirst 1s ease-in-out infinite;
/* 动画 */
.animation {
width: 330rpx;
height: 330rpx;
animation: myfirst 1s ease-in-out infinite;
-webkit-animation: myfirst 1s ease-in-out infinite;
position: absolute;
top: 0rpx;
right: 0rpx;
}
@keyframes myfirst {
0% {
filter: brightness(96%);
}
25% {
filter: brightness(116%);
}
50% {
filter: brightness(136%);
}
75% {
filter: brightness(116%);
}
100% {
filter: brightness(96%);
}
}
9、列表循环
1、wx:for="{{数组或者对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"
2、wx:key="唯一的值"用来提高列表渲染的性能
wx:key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是 循环数组 中的对象的 唯一属性，
wx:key='*this' 就表示 你的数组是一个普通的数组， *this 就表示 你的数组 是一个普通的数组， *this 表示是循环项 [1,2,3,4] ["1","2","ass"]
3、当出现数组的嵌套循环的时候，尤其要注意 以下绑定的名称不要重名，
wx:for-item="item" wx:for-index="index"
4、在只有一层循环的情况下，我们默认不写 wx:for-item="item" wx:for-index="index"
10、对象循环
1、wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
2、循环对象的时候，最好把item和index的名称都修改一下 wx:for-item="value" wx:for-index="key" wx:key="一个唯一的属性"
