117.【微信小程序 - 01】（九）-阿里云开发者社区

(6).实现轮播图展示页面

每个对象下面有两个属性: 一个是 id 另一个是 image

home.wxml: 我们需要使用Mustach语法

<!--pages/home/home.wxml-->
<!-- 轮播图的区域  第一个属性是: 小圆点。第二个属性是 循环-->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

home.wxss

/* pages/home/home.wxss */
swiper{
  height: 350rpx;
}
swiper image{
  width: 100%;
  height: 100%;
}

(7).实现九宫格效果

https://applet-base-api-t.itheima.net/categories

home.js: 挂载九宫格的数据

// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 存放轮播图的数组
    swiperList:[],
    // 存放九宫格
    gridList:[]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 1. 挂载请求轮播图的图片
      this.getSwiperList()
      // 2.挂载九宫格图片
      this.getGridList()
  },
  // 获取轮播图数据的方法
  getSwiperList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/slides',
      method:'GET',
      success:(resp)=>{
        console.log('轮播图->',resp)
        this.setData({
          swiperList:resp.data
        }) 
      }
    })
  },
  getGridList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/categories',
      method:'GET',
      success:(resp)=>{
        console.log('九宫格->',resp)
          this.setData({
            gridList:resp.data
          })
      }
    })
  },
  })

home.wxml

<!--pages/home/home.wxml-->
<!-- 轮播图的区域 -->
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>
<!-- 九宫格区域 -->
<view class="gird-list">
<view class="gird-item" wx:for="{{gridList}}" wx:key="id">
  <image src="{{item.icon}}"></image>
  <text>{{item.name}}</text>
</view>
</view>

home.wxss

.gird-item{
  /* background-color: rgb(10, 10, 10); */
  width: 33.3%;
  height: 200rpx;
  /* 横向布局 */
  display: flex;
  /* 让文本纵向布局 */
  flex-direction: column;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 边框颜色 */
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  /* 盒子 */
  box-sizing: border-box;
}
.gird-list{
  /* 展示在一行 */
  display: flex;
  /* 假如一行盛不下，允许换行 */
  flex-wrap: wrap;
}
.gird-item image{
  width: 60rpx;
  height: 60rpx;
}
.gird-item text{
  font-size: 24rpx;
  margin-top: 10rpx;
}

(五)、小程序-视图与逻辑

1.页面导航 (导航传参-接参)

(1).什么是页面导航

页面导航指的是页面之间的相互跳转。列如: 浏览器中是实现页面导航的方式有如下两种:

< a> 链接
location.href

(2).小程序中实现页面导航的两种方式

声明式导航

在页面上声明一个< navigator>导航组件。
通过点击< navigator>组件实现页面跳转。

编程式导航

调用小程序的导航API，实现页面的跳转。.

2.页面导航-声明式导航 (只写文件名即可)

(1).导航到tabBar页面

tabBar页面指的是被配置为 tabBar的页面。

在使用< navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性；其中:

url 表示需要跳转的页面的地址，必须为 /开头。
open-type 表示跳转的方式，必须为 switchTab。

<!-- 1.这里的url我们必须要以 / 开头 -->
<navigator url="/pages/message/message" open-type="switchTab">导航到信息页面</navigator>

(2).导航到非tabBar页面

非tabBar页面指的是没有被配置为tabBar的页面。

在使用< navigator>组件跳转到普通的非tabBar页面时，则需要指定url属性和open-type属性，其中:

url 表示要跳转的页面的地址，必须以 / 开头
open-type 表示跳转的方式，必须为 navigate

home.wxml

<!--pages/home/home.wxml-->
<text>首页</text>
<!-- 1.这里的url我们必须要以 / 开头 -->
<navigator url="/pages/info/info" open-type="navigate">导航到非tabBar页面</navigator>
<navigator url="/pages/info/info">导航到非tabBar页面</navigator>

注意: 为了简便，在导航到非tabBar页面时，open-type="navigate"属性可以省略。

(3).后退导航

如果要后退到上一页或多级页面，则需要指定open-type 属性和 delta属性，其中:

open-type 的值必须是: navigatBack,表示要进行后退导航。
delta的值必须是数字，表示要后退的层级。

info.wxml

<!--pages/info/info.wxml-->
<text>pages/info/info.wxml</text>
<view>资料</view>
<navigator open-type="navigateBack" delta="1">点我回退上一级</navigator>
<navigator open-type="navigateBack">点我回退上一级</navigator>

注意: 为了简便，如果只是后退到上一页面，则可以省略 delta属性，因为其默认值就是1。

3.页面导航-编程式导航 (只写文件名即可)

(1).导航到tabBar页面 (wx.switchTab(Object))

调用wx.switchTab(Object)方法，可以跳转到tabBar页面，其中Object参数对象的属性列表如下:

属性 类型 是否必须 说明
url string 必填 需要跳转的tabBar页面的路，路径后不能带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功，失败都会执行)

home.js

1.我们只需要指定url即可，切url的文件只需要指定文件的名字即可不需要文件后缀。

// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  gotMessage(){
    // 1.我们只需要指定url即可，切url的文件只需要指定文件的名字即可不需要文件后缀。
    wx.switchTab({
      url: '/pages/contact/contact'
    })
  }
})

home.wxml

<!--pages/home/home.wxml-->
<text>首页</text>
<!-- 1.这里的url我们必须要以 / 开头 -->
<navigator url="/pages/message/message" open-type="switchTab">导航到tabBar页面</navigator>
<view>------------------------------------------------------</view>
<navigator url="/pages/info/info" open-type="navigate">导航到非tabBar页面</navigator>
<navigator url="/pages/info/info">导航到非tabBar页面</navigator>
<view>------------------------------------------------------</view>
<navigator open-type="navigateBack" delta="1"></navigator>
<view>------------------------------------------------------</view>
<button bindtap="gotMessage" type="primary">跳转到Message页面</button>

(2).导航到非tabBar页面 (wx.navigateTo(Object))

调用 wx.navigateTo(Object)方法，可以跳转到非tabBar的页面。其中Object参数对象的属性列表如下:

属性 类型 是否必选 说明
url string 是 需要跳转到非tabBar的页面。其中Object参数对象的属性列表
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功，失败都会执行)

home.js

1.我们只需要指定url即可，切url的文件只需要指定文件的名字即可不需要文件后缀。

// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  gotMessage(){
    // 1.我们只需要指定url即可，切url的文件只需要指定文件的名字即可不需要文件后缀。
    wx.switchTab({
      url: '/pages/contact/contact'
    })
  },
  gotInfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },
})

home.wxml

<button bindtap="gotInfo" type="primary">跳转到非tabBar页面</button>

117.【微信小程序 - 01】（九）

(6).实现轮播图展示页面

(7).实现九宫格效果

(五)、小程序-视图与逻辑

1.页面导航 (导航传参-接参)

(1).什么是页面导航

(2).小程序中实现页面导航的两种方式

2.页面导航-声明式导航 (只写文件名即可)

(1).导航到tabBar页面

(2).导航到非tabBar页面

(3).后退导航

3.页面导航-编程式导航 (只写文件名即可)

(1).导航到tabBar页面 (wx.switchTab(Object))

(2).导航到非tabBar页面 (wx.navigateTo(Object))

热门文章

最新文章

相关课程

相关电子书

相关实验场景