微信小程序学习日记2

删除页面注意事项

在目录栏删除以后要在app.json中把页面的路径删除

常用组件

【view】视图容器 块级组件

【text】文本 行级组件

【button】按钮

【input】输入框

【image】图片【src】图片来源

给图片加样式：首先先写该图片的【class】类名，在wxss中，利用类名来写【width】、【height

】

轮播图

【swiper】【swiper-item】

关系：【swiper-item】构成【swiper】

【swiper-item】有几个轮播图就有几个【swiper-item】

【indicator-dots】 是否展示小圆点

【circular】是否循环播放，到了最后一张又出现第一张

【autoplay】是否自动轮播

【interval】自动轮播的间隔时间，默认间隔时间为5000毫秒

<swiper indicator-dots="true" circular="true" autoplay="true" interval="2000">
  <swiper-item>轮播图1</swiper-item>
  <swiper-item>轮播图2</swiper-item>
  <swiper-item>轮播图3</swiper-item>
</swiper>

【navigator】

相当于网页中的a链接，实现页面的跳转

【url】跳转页面的URL地址，必须以/开头

可以通过【？】传递URL参数

如果要跳转到Tabbar页面，要声明【open-type】为【navigate】（可以省略不写）

<navigator url="/pages/myself/myself" open-type = "navigate">跳转</navigator>

如果要跳转到Tabbar页面，要声明【open-type】为【switchTab】

<navigator url="/pages/myself/myself" open-type = "switchTab">跳转</navigator>

实现后退导航

要声明【open-type】为【navigateBack】 

【delta】是表示返回到层级数，默认为1

注意：在Tabbar页面里面无法使用这个

<navigator open-type="navigateBack" delta="1">点我返回上一级</navigator>

编程式导航

跳转到Tabbar页面

【.wxml】

<button bindtap="gotoMessage">跳转到home页面</button>

【.js】

 gotoMessage(){
    wx.switchTab({
      url:'/pages/home/home'
    })
  },

跳转到非Tabbar页面

【.wxml】

<button bindtap="gotoInfo">跳转到info页面</button>

【.js】

gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },