一、常用組件

在上一個(gè)章節(jié)中講解了封裝請(qǐng)求數(shù)據(jù)的模塊，在此處請(qǐng)求輪播圖的數(shù)據(jù)

1.首頁輪播圖數(shù)據(jù)的請(qǐng)求以及渲染

1.1 輪播圖數(shù)據(jù)的請(qǐng)求 pages/home/home.js

import

2 使用組件 - 視圖容器 - swiper

滑塊視圖容器。其中只可放置swiper-item組件，否則會(huì)導(dǎo)致未定義的行為。 屬性表如下

?

在pages/home/home.wxml文件中輸入如下代碼查看效果

<!--

二、自定義組件 - 產(chǎn)品列表

1.自定義組件的布局

components/prolist/prolist.wxml

<

2.自定義組件的樣式

components/prolist/prolist.wxss

/* components/prolist/prolist.wxss */

3.首頁請(qǐng)求數(shù)據(jù)，并且傳遞給子組件

pages/home/home.js

import

pages/home/home.wxml

<

4.子組件接收數(shù)據(jù)

components/prolist/prolist.js

Component

5.子組件渲染數(shù)據(jù)

components/prolist/prolist.wxml

<

三、實(shí)現(xiàn)下拉刷新上拉加載

1.開啟首頁的下拉刷新功能

pages/home/home.json

{

2.完善相關(guān)的下拉刷新函數(shù)

pages/home/home.js

// pages/home/home.js

上拉下拉測試即可

四、返回頂部功能實(shí)現(xiàn)

在首頁中設(shè)置一個(gè)固定定位的按鈕，然后綁定點(diǎn)擊事件，綁定事件使用 bindtap，然后調(diào)用小程序提供的api即可返回

// pages/home/home.wxml

五、實(shí)現(xiàn)點(diǎn)擊商品列表進(jìn)入產(chǎn)品的詳情頁面

1.構(gòu)建詳情頁面

app.json

"pages"

2.聲明式導(dǎo)航跳轉(zhuǎn)

使用小程序 組件-導(dǎo)航-navigator

頁面鏈接。

?

open-type 的合法值 -- 在編程式導(dǎo)航中詳細(xì)講解

// components/prolist/prolist.wxml

3.詳情頁面接收數(shù)據(jù)并且渲染數(shù)據(jù)

// pages/detail/detail.js

點(diǎn)擊不同的產(chǎn)品測試即可

4.編程式導(dǎo)航渲染

使用小程序提供的api實(shí)現(xiàn)編程式路由的跳轉(zhuǎn)

wx.switchTab(Object object)

跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面

wx.reLaunch(Object object)

關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個(gè)頁面

wx.redirectTo(Object object)

關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面

wx.navigateTo(Object object)

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程序中頁面棧最多十層

wx.navigateBack(Object object)

關(guān)閉當(dāng)前頁面，返回上一頁面或多級(jí)頁面。可通過 getCurrentPages 獲取當(dāng)前的頁面棧，決定需要返回幾層

小程序傳遞數(shù)據(jù)使用 data-params形式，可以在事件中根據(jù)event獲取該參數(shù)// components/prolist/prolist.wxml 千鋒HTML5學(xué)院：微信小程序?qū)W習(xí)筆記（二）-- 開發(fā)之框架?zhuanlan.zhihu.com千鋒HTML5學(xué)院：微信小程序?qū)W習(xí)筆記（四）-- 常用的組件地圖之-map?zhuanlan.zhihu.com

總結(jié)

以上是生活随笔為你收集整理的小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。