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

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

进入心得页面以后

第一个模块是轮播图用的是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
}
相关推荐
流口水的兔子4 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
呆呆的心4 小时前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
一念杂记4 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
拖孩7 小时前
微信群太多,管理麻烦?那试试接入AI助手吧~
前端·后端·微信
The_era_achievs_hero7 小时前
微信小程序61~70
微信小程序·小程序
老蒋新思维8 小时前
多门店系统:知识付费行业的规模化增长新引擎|创客匠人
微信·内容运营·创始人ip
编程猪猪侠9 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu19 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
一渊之隔1 天前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序