微信小程序组件(标签)—码虫带你飞

微信小程序组件(标签)

组件文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

常用布局标签

<view></view>               相当于    <div></div>
<text></text>               相当于    <span></span>
<image></image>             相当于    <img />
<navigator></navigator>     相当于    <a></a>
<block></block>             区块标签，不会渲染到页面

注意：image组件默认宽度300px、高度225px，很多时候我们都不需要这个默认宽高，记得手动设置宽高

常用表单标签

<button></button>
<input type="text" />               
<checkbox />
<radio/>

轮播图组件

<swiper indicator-dots="是否显示面板指示点" autoplay="是否自动切换" interval="自动切换时间间隔" duration="滑动动画时长">
    <swiper-item>
        <image src="图片路径1" width="375" height="150"/>
    </swiper-item>
    <swiper-item>
        <image src="图片路径2" width="375" height="150"/>
    </swiper-item>
</swiper>

探索：实现无缝轮播怎么办？

微信小程序页面函数

生命周期函数

Page({
  /** 页面的初始数据 */
  data: {
  },
  /** 生命周期函数--监听页面加载 */
  onLoad: function (options) {
  },
  /** 生命周期函数--监听页面初次渲染完成 */
  onReady: function () {
  },
  /** 生命周期函数--监听页面显示 */
  onShow: function () {
  },
  /** 生命周期函数--监听页面隐藏 */
  onHide: function () {
  },
  /** 生命周期函数--监听页面卸载 */
  onUnload: function () {
  }
})