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

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

进入心得页面以后

第一个模块是轮播图用的是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
}
相关推荐
亮子AI2 小时前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序
Q_Q5110082853 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆3 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
從南走到北3 小时前
洗车小程序系统
微信小程序·小程序
namehu5 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
dazhong20125 小时前
微信小程序开发实战指南(三)-- Webview访问总结
微信小程序·小程序
盛夏绽放8 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
流水线上的指令侠9 小时前
使用C#写微信小程序后端——电商微信小程序
微信小程序·小程序·c#·visual studio
知识分享小能手9 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
小岛前端12 小时前
🔥Vue3 移动端组件精选!满足各种场景!
前端·vue.js·微信小程序