微信小程序——基础

下拉刷新事件

json文件
{
  "usingComponents": {},
  "enablePullDownRefresh": true,		//开启下拉刷新
  "backgroundColor": "#efefef",	//下拉刷新背景颜色
  "backgroundTextStyle": "dark",	//下拉刷新loading样式
}
js文件
data: {
    count: 0
},
onPullDownRefresh: function () {	//监听下拉刷新事件
	console.log("发出了message下拉刷新事件"),
	this.setData({
		count: this.data.count+1
	}),   
	wx.stopPullDownRefresh({    //关闭下拉刷新
		success: (res) => {
			console.log("刷新结束");
		},
	})
},

页面上拉触底事件的处理函数

json文件
"onReachBottomDistance": 150	//默认50（px）
js文件
onReachBottom: function () {	//监听上拉触底事件
	console.log("刷新结束");
	wx.showLoading({
      	title: '数据加载中',
    }),
    //隐藏loading
    wx.hideLoading({
		success: (res) => {
		    console.log("已隐藏")
		},
    })
},

小程序生命周期 app.js

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

自定义组件

1、在根目录中创建components目录
2、在components目录中声明组件 右击新建component。一个文件夹为一个组件

js文件
Component({
    options: {
        styleIsolation: 'apply-shared'//控制组件样式隔离
    },
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        count: 0
    },

    /**
     * 组件的方法列表
     */
    methods: {	//zu
        addCount(){
            this.setData({
                count: this.data.count+1
            }),
            this._showCount()
        },
        _showCount(){
            wx.showToast({
              title: 'count是：'+this.data.count,
              icon: 'none'
            })
        }
    }
})
wxml文件
<text>components/test/test.wxml</text>
<view>{{count}}</view>
<button bindtap="addCount">点击</button>

3、全局引用

json文件 pages平级
"usingComponents": {
  	"my-test1": "/components/test/test"	//左侧为组件名称 右侧为组件路径
}

应用	在对应页面的wxml文件中
<my-test1></my-test1>

4、页面局部引入自定义组件

引入对应的json文件中
"usingComponents": {
	"my-test1": "/components/test/test"	//左侧为组件名称 右侧为组件路径
}

应用	在对应页面的wxml文件中
<my-test1></my-test1>

页面上拉触底事件的处理函数删除线格式

json文件
"onReachBottomDistance": 150
js文件
onReachBottom: function () {	//监听上拉触底事件
	console.log("刷新结束");
},

页面上拉触底事件的处理函数

json文件
"onReachBottomDistance": 150
js文件
onReachBottom: function () {	//监听上拉触底事件
	console.log("刷新结束");
},

页面上拉触底事件的处理函数

json文件
"onReachBottomDistance": 150
js文件
onReachBottom: function () {	//监听上拉触底事件
	console.log("刷新结束");
},