小程序学习基础（页面加载）

打开首页，然后点击第一个按钮进去心得页面

进入心得页面以后

第一个模块是轮播图用的是swiper组件，然后就是四个按钮绑定点击事件，最后就是下拉刷新，下拉滚动，上拉加载。代码顺序wxml,js,wcss,json。

<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"><scroll-view scroll-y="{{true}}" bindscrolltolower="lower"><block wx:for="{{banners}}" wx:key="acm"> <image mode="widthFix" src="{{item.image}}">初始化numbers为：{{numbers}}按钮<block wx:for="{{btns}}" wx:key="*this"><button bindtap="btn" data-colors="{{item}}">{{item}}<block wx:for="{{50}}" wx:key="*this">{{item}}

// pages/one/one.jsPage({/** * 页面的初始数据 */data: {banners:[],recommends:[],numbers:100,btns:["red","blue","green"]},/** * 生命周期函数--监听页面加载 */onLoad(options) {wx:wx.request({url: 'http://123.207.32.32:8000/home/multidata',success: (result) => {const banners = result.data.data.banner.listconst recommends = result.data.data.recommend.listthis.setData({banners,recommends})}})}, /** * 设置按钮点击事件 */onClickBtn(){console.log("你点击了一下按钮")},btn(event){const colors= event.target.dataset.colorsconsole.log(colors)},/** * 生命周期函数--监听页面初次渲染完成 */onReady() {},/** * 生命周期函数--监听页面显示 */onShow() {},/** * 生命周期函数--监听页面隐藏 */onHide() {},/** * 生命周期函数--监听页面卸载 */onUnload() {},/** * 页面相关事件处理函数--监听用户下拉动作 */onPullDownRefresh() {console.log("onPullDownRefresh")},/** * 页面上拉触底事件的处理函数 */onReachBottom() {console.log("onReachBottom")},/** * 页面下拉触底事件的处理函数 */lower(){console.log("下拉触底了")},/** * 用户点击右上角分享 */onShareAppMessage() {}})

/* pages/one/one.wxss */image{width: 100%;}

{"usingComponents": {"navigation-bar": "/components/navigation-bar/navigation-bar"},"enablePullDownRefresh": true}