微信小程序实践中获得的知识（1）

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 标签时的写法不同

方法二：使用 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"

到组件

// 与页面衔接 触发页面中的方法并传数据，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);
},

② 将页面中数据传到组件中去

页面中引用组件

取到我们从页面中传入的值

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

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

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="一个唯一的属性"