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

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

进入心得页面以后

第一个模块是轮播图用的是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
}
相关推荐
云起SAAS10 小时前
ai公司起名取名抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·ai公司起名取名
黑马源码库miui5208610 小时前
JAVA购物返利商品比价系统源码支持微信小程序
微信·微信小程序·小程序·1024程序员节
学会煎墙10 小时前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
赣州云智科技的技术铺子20 小时前
【一步步开发AI运动APP】十三、如何进行运动开始前的站位预检,提升用户体验
微信小程序·小程序·云开发·智能小程序
TiAmo zhang1 天前
微信小程序开发案例 | 简易登录小程序
微信小程序·小程序·1024程序员节
黑马源码库miui520861 天前
场馆预定系统小程序
微信·微信小程序·小程序·1024程序员节
知识分享小能手3 天前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手3 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生3 天前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
從南走到北3 天前
JAVA无人自助共享系统台球室源码自助开台约球交友系统源码小程序
java·微信·微信小程序·小程序·1024程序员节