一、常用組件
在上一個章節(jié)中講解了封裝請求數(shù)據(jù)的模塊姿现,在此處請求輪播圖的數(shù)據(jù)
1.首頁輪播圖數(shù)據(jù)的請求以及渲染
1.1 輪播圖數(shù)據(jù)的請求 pages/home/home.js
import { request } from './../../utils/index.js'
Page({
?
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
bannerlist: []
},
?
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
request('/api/pro/banner').then(data => {
console.log(data)
// 微信小程序修改數(shù)據(jù)的方式
this.setData({
bannerlist: data.data
})
})
},
})
2 使用組件 - 視圖容器 - swiper
滑塊視圖容器。其中只可放置swiper-item組件步势,否則會導(dǎo)致未定義的行為鄙信。 屬性表如下
?
在pages/home/home.wxml文件中輸入如下代碼查看效果
<!--pages/home/home.wxml-->
<swiper
indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}"
duration="{{500}}">
<block wx:for="{{bannerlist}}" wx:key="index">
<swiper-item >
<image src="{{'http://daxun.kuboy.top' + item}}"></image>
</swiper-item>
</block>
</swiper>
<prolist></prolist>
二、自定義組件 - 產(chǎn)品列表
1.自定義組件的布局
components/prolist/prolist.wxml
<view class="prolist">
<view class="proitem">
<view class="itemimg">
<image class="img" src=""></image>
</view>
<view class="iteminfo">
<view class="title">
產(chǎn)品名稱
</view>
<view class="price">
¥199
</view>
</view>
</view>
</view>
2.自定義組件的樣式
components/prolist/prolist.wxss
/* components/prolist/prolist.wxss */
.prolist .proitem{
width: 100%;
display: flex;
height: 100px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
}
?
.prolist .proitem .itemimg{
width: 100px;
height: 100px;
padding: 5px;
}
?
.prolist .proitem .itemimg .img{
width: 90px;
height: 90px;
box-sizing: border-box;
border: 1px solid #ccc;
}
?
.prolist .proitem .iteminfo {
padding: 3px;
}
?
.prolist .proitem .iteminfo .title{
font-size: 18px;
font-weight: bold;
}
?
.prolist .proitem .iteminfo .price{
font-size: 12px;
}
3.首頁請求數(shù)據(jù)蹬屹,并且傳遞給子組件
pages/home/home.js
import { request } from './../../utils/index.js'
Page({
?
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
prolist: []
},
?
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
request('/api/pro').then(data => {
console.log(data)
// 微信小程序修改數(shù)據(jù)的方式
this.setData({
prolist: data.data
})
})
},
})
pages/home/home.wxml
<prolist prolist="{{prolist}}"></prolist>
4.子組件接收數(shù)據(jù)
components/prolist/prolist.js
Component({
/**
* 組件的屬性列表
*/
properties: {
prolist: Array
},
})
5.子組件渲染數(shù)據(jù)
components/prolist/prolist.wxml
<view class="prolist">
<view class="proitem" wx:for="{{prolist}}" wx:key="item.proid">
<view class="itemimg">
<image class="img" src="{{item.proimg}}"></image>
</view>
<view class="iteminfo">
<view class="title">
{{item.proname}}
</view>
<view class="price">
¥{{item.price}}
</view>
</view>
</view>
</view>
三、實現(xiàn)下拉刷新上拉加載
1.開啟首頁的下拉刷新功能
pages/home/home.json
// pages/home/home.js
import { request } from './../../utils/index.js'
Page({
?
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
bannerlist: [],
prolist: [],
pageCode: 1 // 頁碼
},
?
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
request('/api/pro/banner').then(data => {
console.log(data)
this.setData({
bannerlist: data.data
})
})
?
request('/api/pro').then(data => {
console.log(data)
this.setData({
prolist: data.data
})
})
},
?
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
request('/api/pro').then(data => {
console.log(data)
this.setData({
prolist: data.data,
pageCode: 1
})
})
},
?
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
let num = this.data.pageCode;
let prolist = this.data.prolist
num++;
console.log(num)
request('/api/pro', {
pageCode: num
}).then(data => {
// 此處注意臨界值的變化 -- 沒有數(shù)據(jù)
this.setData({
prolist: [...prolist, ...data.data],
pageCode: num
})
})
}
})
上拉下拉測試即可
四白华、返回頂部功能實現(xiàn)
在首頁中設(shè)置一個固定定位的按鈕慨默,然后綁定點擊事件,綁定事件使用 bindtap弧腥,然后調(diào)用小程序提供的api即可返回
// pages/home/home.wxml
<view class="backtop" bindtap="backtop"> ↑ </view>
?
// pages/home/home.wxss
.backtop {
position: fixed;
bottom: 10px;
right: 8px;
border-radius: 50%;
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0.5);
font-size: 18px;
text-align: center;
line-height: 30px;
}
?
// pages/home/home.js
Page({
/**
* 自定義函數(shù)
*/
backtop: function () {
// 小程序api 的界面 - 滾動
wx.pageScrollTo({
scrollTop: 0,
duration: 300
})
}
})
五厦取、實現(xiàn)點擊商品列表進入產(chǎn)品的詳情頁面
1.構(gòu)建詳情頁面
app.json
"pages": [
"pages/detail/detail"
],
2.聲明式導(dǎo)航跳轉(zhuǎn)
使用小程序 組件-導(dǎo)航-navigator
頁面鏈接。
?
open-type 的合法值 -- 在編程式導(dǎo)航中詳細(xì)講解
// components/prolist/prolist.wxml
<view class="prolist">
<navigator url="{{'/pages/detail/detail?proid=' + item.proid}}" wx:for="{{prolist}}" wx:key="item.proid">
<view class="proitem" >
<view class="itemimg">
<image class="img" src="{{item.proimg}}"></image>
</view>
<view class="iteminfo">
<view class="title">
{{item.proname}}
</view>
<view class="price">
¥{{item.price}}
</view>
</view>
</view>
</navigator>
</view>
3.詳情頁面接收數(shù)據(jù)并且渲染數(shù)據(jù)
// pages/detail/detail.js
import { request } from './../../utils/index.js';
Page({
?
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
proid: '',
proname: '',
proimg: ''
price: 0
},
?
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
// options為接收的參數(shù)
const { proid } = options
request('/api/pro/detail?proid=' + proid).then(data => {
console.log(data.data)
const { proid, proname, price, proimg} = data.data
this.setData({
proid, proname, price, proimg
})
})
}
})
?
// pages/detail/detail.wxml
?
<image src="{{proimg}}" style="width: 100px;height: 100px;"></image>
<view>{{proname}}</view>
<view>¥{{price}}</view>
?
點擊不同的產(chǎn)品測試即可
4.編程式導(dǎo)航渲染
使用小程序提供的api實現(xiàn)編程式路由的跳轉(zhuǎn)
wx.switchTab(Object object)
跳轉(zhuǎn)到 tabBar 頁面管搪,并關(guān)閉其他所有非 tabBar 頁面
wx.reLaunch(Object object)
關(guān)閉所有頁面虾攻,打開到應(yīng)用內(nèi)的某個頁面
wx.redirectTo(Object object)
關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面更鲁。但是不允許跳轉(zhuǎn)到 tabbar 頁面
wx.navigateTo(Object object)
保留當(dāng)前頁面霎箍,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到 tabbar 頁面澡为。使用 wx.navigateBack 可以返回到原頁面漂坏。小程序中頁面棧最多十層
wx.navigateBack(Object object)
關(guān)閉當(dāng)前頁面,返回上一頁面或多級頁面媒至《ケ穑可通過 getCurrentPages 獲取當(dāng)前的頁面棧,決定需要返回幾層
小程序傳遞數(shù)據(jù)使用 data-params形式拒啰,可以在事件中根據(jù)event獲取該參數(shù)
// components/prolist/prolist.wxml
<view class="prolist">
<view class="proitem" bindtap="toDetail" data-proid="{{item.proid}}" wx:for="{{prolist}}" wx:key="item.proid">
<view class="itemimg">
<image class="img" src="{{item.proimg}}"></image>
</view>
<view class="iteminfo">
<view class="title">
{{item.proname}}
</view>
<view class="price">
¥{{item.price}}
</view>
</view>
</view>
</view>
?
// components/prolist/prolist.js
Component({
/**
* 組件的屬性列表
*/
properties: {
prolist: Array
},
?
/**
* 組件的初始數(shù)據(jù)
*/
data: {
?
},
?
/**
* 組件的方法列表
*/
methods: {
toDetail (event) {
const { proid } = event.currentTarget.dataset
wx.navigateTo({
url: '/pages/detail/detail?proid=' + proid
})
}
}
})