小程序学习基础(页面加载)

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

进入心得页面以后

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

复制代码
<!--pages/one/one.wxml-->
<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view scroll-y="{{true}}" style="width:100%;height:1000rpx;" bindscrolltolower="lower">
<view>
  <swiper autoplay circular>
    <block wx:for="{{banners}}" wx:key="acm">
    <swiper-item> 
      <image mode="widthFix" src="{{item.image}}"></image>    
    </swiper-item>          
    </block>
  </swiper>
  <view>
    <text>
      初始化numbers为:{{numbers}}
    </text>
  </view>
  <view class="btn1">
    <button bindtap = "onClickBtn">
      按钮      
    </button>
    <block wx:for="{{btns}}" wx:key="*this">
      <button bindtap="btn" style="background-color: {{item}};" data-colors="{{item}}">{{item}}</button>      
    </block>
  </view>
  <view>
    <block wx:for="{{50}}" wx:key="*this">
      <view>{{item}}</view>
    </block>
  </view>
</view>
</scroll-view>

// pages/one/one.js
Page({

  /**
   * 页面的初始数据
   */
  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.list
        const recommends = result.data.data.recommend.list

        this.setData({
          banners,
          recommends
        })
      }
    })
  },
   /**
   * 设置按钮点击事件
   */
  onClickBtn(){
    console.log("你点击了一下按钮")
  },
  btn(event){
    const colors= event.target.dataset.colors
    console.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
}
相关推荐
xkxnq13 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷13 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯14 小时前
小程序自定义组件学习笔记
微信小程序
xmdoor20 小时前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
sunly_1 天前
Flutter:上传图片,选择相机或相册:wechat_assets_picker
数码相机·flutter·微信
The_era_achievs_hero2 天前
微信小程序141~150
微信小程序·小程序·notepad++
陈思杰系统思考Jason2 天前
系统思考场景应用
百度·微信·微信公众平台·新浪微博·微信开放平台
熊猫片沃子2 天前
小程序间跳转与传值实现方案
前端·微信小程序
泉城老铁2 天前
Spring Boot + Vue 实现微信扫码登录的详细攻略
vue.js·后端·微信
normi-D182 天前
微信小程序未登录状态下的导航拦截有哪些方法可以实现
微信小程序·小程序