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

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

进入心得页面以后

第一个模块是轮播图用的是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
}
相关推荐
睫毛上长雀斑19 小时前
jsApi支付+h5支付
微信
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
亮子AI2 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
毕设源码-钟学长3 天前
【开题答辩全过程】以 “旧书驿站”微信小程序的设计与开发为例,包含答辩的问题和答案
微信小程序·小程序
nodcloud4 天前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
项目題供诗4 天前
微信小程序开发教程(八)
微信小程序·小程序
拼图2095 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
Q_Q5110082855 天前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app