




版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第二章
主講人:XX文章列表頁(yè)面本章目標(biāo)使用swiper和swiper-items實(shí)現(xiàn)文章頁(yè)面輪播理解.js文件的代碼結(jié)構(gòu)與page頁(yè)面的生命周期掌握微信小程序數(shù)據(jù)綁定與setData函數(shù)(Mustache語(yǔ)法)掌握微信小程序事件與事件冒泡掌握微信小程序路由機(jī)制一、用swiper組件實(shí)現(xiàn)文章輪播小米商城首頁(yè)的Banner輪播圖不管PC網(wǎng)站還是WebApp首頁(yè)輪播圖功能很常用,微信小程序的API提供已經(jīng)封裝好的組件swiper,使用起來(lái)非常方便。
swiper組件是小程序提供的滑動(dòng)視圖容器,它需要放置swiper-item組件配置使用,同時(shí),需要注意的是,swiper組件的直接子元素只可以使swiper-item,如果放置其他組件,則被自動(dòng)刪除。但swiper-item下是可以放置其他組件或者元素的。一、用swiper組件實(shí)現(xiàn)文章輪播文章頁(yè)面輪播最終實(shí)現(xiàn)效果實(shí)現(xiàn)步驟:第一步:創(chuàng)建文章列表頁(yè)面。第二步:使用swiper組件和swiper-item組件構(gòu)建頁(yè)面內(nèi)容,并設(shè)置頁(yè)面樣式。設(shè)置swiper屬性。第三步:設(shè)置swiper屬性。操作步驟一:創(chuàng)建文章列表頁(yè)面1、在pages目錄創(chuàng)建一個(gè)名為posts頁(yè)面,然后通過(guò)微信開(kāi)發(fā)工具創(chuàng)建頁(yè)面所需要4個(gè)文件;2、把a(bǔ)pp.json的pages數(shù)組關(guān)于posts頁(yè)面調(diào)整到pages數(shù)組的第一個(gè)元素
"pages":
[
"pages/posts/posts",
"pages/welcome/welcome",
"pages/index/index"
]操作步驟二:構(gòu)建頁(yè)面內(nèi)容,并設(shè)置頁(yè)面樣式<view>
<swiper>
<swiper-item>
<image
src="/images/posts/post-1.png"></image>
</swiper-item>
<swiper-item>
<image
src="/images/posts/post-2.png"></image>
</swiper-item>
<swiper-item>
<image
src="/images/posts/post-3.png"></image>
</swiper-item>
</swiper></view>posts頁(yè)面代碼/*設(shè)置swiper的樣式*/swiper{
width:
100%;
height:460rpx;}/*設(shè)置swiper-item中image組件的樣式*/swiperimage{
width:
100%;
height:460rpx;}posts樣式代碼運(yùn)行效果操作步驟三:設(shè)置swiper屬性indicator-dotsBoolean類(lèi)型。用來(lái)指定是否顯示面板指示點(diǎn),默認(rèn)值為false。indicator-colorcolor類(lèi)型。用來(lái)指定顯示面板顏色,默認(rèn)值為rgba(0,0,0,.3)。indicator-active-colorcolor類(lèi)型。用來(lái)指定當(dāng)前選中的指示點(diǎn)顏色,默認(rèn)值#000000autoplayBoolean類(lèi)型。用來(lái)指定是否自動(dòng)播放,默認(rèn)值為falseIntervalNumber類(lèi)型。用來(lái)設(shè)置swiper-item的自動(dòng)切換時(shí)間間隔,默認(rèn)值為5000毫秒。CircularBoolean類(lèi)型。用來(lái)指定是否循環(huán)輪播滾動(dòng),默認(rèn)值為false。<view>
<swiper
indicator-dots="true"indicator-active-color="#fff"indicator
autoplay="true"interval="5000"circular="true">
<swiper-item>
<image
src="/images/posts/post-1@text.jpg"></image>
</swiper-item>
<swiper-item>
<image
src="/images/posts/post-2@text.jpg"></image>
</swiper-item>
<swiper-item>
<image
src="/images/posts/post-3@text.jpg"></image>
</swiper-item>
</swiper></view>運(yùn)行效果運(yùn)行效果Boolean值的陷阱小程序組件中Boolean類(lèi)型的屬性并不是Boolean類(lèi)型,而是一個(gè)字符串類(lèi)型,程序在執(zhí)行讀取這個(gè)內(nèi)容使用JavaScript語(yǔ)言進(jìn)行讀取都會(huì)認(rèn)為這是一個(gè)true。所以,設(shè)置indicator-dots=”false”屬性運(yùn)行效果跟我們預(yù)期效果不一樣。在這里我們?cè)O(shè)置Boolean類(lèi)型屬性false,有以下幾種方式:不加入indicator-dots屬性
indicator-dots=””indicator-dots=”{{false}}”同樣如何設(shè)置Boolean類(lèi)型屬性為true,有以下幾種方式:加入indicator-dots屬性,不設(shè)置屬性值indicator-dots=”true”indicator-dots=”{{true}}”<view>
<swiper
indicator-dots="{{true}}"indicator-active-color="#fff"indicator
autoplay="true"interval="5000"circular="{{true}}">
<swiper-item>
<image
src="/images/posts/post-1@text.jpg"></image>
</swiper-item>
<swiper-item>
<image
src="/images/posts/post-2@text.jpg"></image>
</swiper-item>
<swiper-item>
<image
src="/images/posts/post-3@text.jpg"></image>
</swiper-item>
</swiper></view>推薦屬性設(shè)置方式微信小程序渲染層和邏輯層渲染層的界面使用了WebView進(jìn)行渲染;邏輯層采用JsCore線程運(yùn)行JS腳本。一個(gè)小程序存在多個(gè)界面,所以渲染層存在多個(gè)WebView線程,這兩個(gè)線程的通信會(huì)經(jīng)由微信客戶端(下文中也會(huì)采用Native來(lái)代指微信客戶端)做中轉(zhuǎn),邏輯層發(fā)送網(wǎng)絡(luò)請(qǐng)求也經(jīng)由Native轉(zhuǎn)發(fā)頁(yè)面生命周期onLoad監(jiān)聽(tīng)頁(yè)面加載,一個(gè)頁(yè)面只會(huì)調(diào)用一次。onShow監(jiān)聽(tīng)頁(yè)面顯示,每次打開(kāi)頁(yè)面都會(huì)調(diào)用。onReady監(jiān)聽(tīng)頁(yè)面初次渲染完成,一個(gè)頁(yè)面只會(huì)調(diào)用一次,代表頁(yè)面已經(jīng)準(zhǔn)備完成,可以和視圖層進(jìn)行交互。onHide監(jiān)聽(tīng)頁(yè)面隱藏。onUnload監(jiān)聽(tīng)頁(yè)面卸載。頁(yè)面生命周期-示例Page({
/***頁(yè)面的初始數(shù)據(jù)*/data:
{
},
/***生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載*/
onLoad:
function
(options)
{
console.log("onLoad:Post頁(yè)面加載。");
},
/***生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成*/
onReady:
function
()
{
console.log("onReady:post初次渲染完成");
},
/***生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示*/
onShow:
function
()
{
console.log("onShow:post頁(yè)面顯示");
},
/***生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏*/
onHide:
function
()
{
console.log("onHide:post頁(yè)面隱藏");
},
/***生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載*/
onUnload:
function
()
{
console.log("onUnload:post頁(yè)面卸載");
},})生命周期函數(shù)的執(zhí)行順序接下點(diǎn)擊模擬器Home鍵微信小程序簡(jiǎn)單數(shù)據(jù)綁定WXML中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng)Page的data。//pages/welcome/welcome.jsPage({
/***頁(yè)面的初始數(shù)據(jù)*/data:
{
avatar:"/images/bingdundun.jpg",
motto:"Hello,冰墩墩"
}})<view
class="container"><imageclass="avatar"src="{{avatar}}"></image><textclass="motto">{{motto}}</text>
<view
class="journey-container">
<text
class="journey">開(kāi)啟小程序之旅</text>
</view></view>數(shù)據(jù)綁定使用Mustache語(yǔ)法(雙大括號(hào))將變量包起來(lái),可以作用于數(shù)據(jù)綁定工具-AppData面板使用welcome頁(yè)面在AppData面板中的數(shù)據(jù)綁定情況在AppData中設(shè)置motto值微信小程序復(fù)雜數(shù)據(jù)綁定-數(shù)據(jù)初始化
/***頁(yè)面的初始數(shù)據(jù)*/data:
{
date:
"February
9
2023",post:{title:
"2023LPL春季賽第八周最佳陣容",postImg:
"/images/post/post1.jpg",avatar:
"/images/avatar/1.png",content:
"2023LPL春季賽第八周最佳陣容已經(jīng)出爐,請(qǐng)大家一起圍觀...",
},readingNum:
23,collectionNum:{array:[108]
},commentNum:
7
}
<!--文章列表-->
<view
class="post-container">
<view
class="post-author-date">
<image
src="{{post.avatar}}"/>
<text>{{date}}</text>
</view>
<text
class="post-title">{{post.title}}</text>
<image
class="post-image"src="{{post.postImg}}"mode="aspectFill"/>
<text
class="post-content">{{post.content}}</text>
<view
class="post-like">
<image
src="/images/icon/wx_app_collect.png"/>
<text>{{collectionNum.array[0]}}</text>
<image
src="/images/icon/wx_app_view.png"></image>
<text>{{readingNum}}</text>
<image
src="/images/icon/wx_app_message.png"></image>
<text>{{commentNum}}</text>
</view>
</view></view>在js文件定義模擬綁定數(shù)據(jù)使用{{}}語(yǔ)法實(shí)現(xiàn)復(fù)雜對(duì)象綁定微信小程序-圖片裁剪<image
class="post-image"src="{{post.postImg}}"mode="aspectFill"/>文章列表中圖片圖片被壓縮變形了修改圖片mode之后的運(yùn)行效果列表渲染wx:for-實(shí)現(xiàn)文章輪播數(shù)據(jù)動(dòng)態(tài)步驟一:在this.data中添加模擬服務(wù)器的數(shù)據(jù)的代碼bannerList:['/images/posts/post-1.png',
'/images/posts/post-2.png',
'/images/posts/post-3.png']步驟二:需要在頁(yè)面通過(guò)wx:for進(jìn)行數(shù)據(jù)綁定
<!--文章輪播-->
<swiper
indicator-dots="{{true}}"indicator-active-color="#fff"indicator
autoplay="true"interval="5000"circular="{{true}}">
<swiper-item
wx:for="{{bannerList}}"wx:for-item="bannerItem">
<image
src="{{bannerItem}}"></image>
</swiper-item>
</swiper>在這里我們列表渲染的內(nèi)容是<swiper-item>,所以我們?cè)诖螛?biāo)簽中使用wx:for,在這里我們通過(guò)“wx:for-item”制定每次迭代內(nèi)容項(xiàng),在這里可以省略,默認(rèn)為”item”。列表渲染wx:for-實(shí)現(xiàn)文章列表數(shù)據(jù)動(dòng)態(tài)<!--文章列表-->
<block
wx:for="{{postList}}"wx:for-item="post"
wx:for-index="postId">
<view
class="post-container">
<view
class="post-author-date">
<image
src="{{post.avatar}}"/>
<text>{{post.date}}</text>
</view>
<text
class="post-title">{{post.title}}</text>
<image
class="post-image"src="{{post.postImg}}"mode="aspectFill"/>
<text
class="post-content">{{post.content}}</text>
<view
class="post-like">
<image
src="/images/icon/wx_app_collect.png"/>
<text>{{post.collectionNum}}</text>
<image
src="/images/icon/wx_app_view.png"></image>
<text>{{post.readingNum}}</text>
<image
src="/images/icon/wx_app_message.png"></image>
<text>{{post.commentNum}}</text>
</view>
</view>
</block>運(yùn)行效果微信小程序事件的使用微信小程序中事件的定義:事件是視圖層到邏輯層的通訊方式。事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。事件可以綁定在組件上,當(dāng)達(dá)到觸發(fā)事件,就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。事件對(duì)象可以攜帶額外信息,如id,dataset,touches。事件的使用<view
class="container">
<image
class="avatar"src="{{avatar}}"></image>
<text
class="motto">{{motto}}</text>
<view
catchtap="hanldTap"class="journey-container">
<text
class="journey">開(kāi)啟小程序之旅</text>
</view></view>
hanldTap:function(event){
console.log("clickme!");
}事件對(duì)象當(dāng)組件觸發(fā)事件時(shí),邏輯層綁定該事件的處理函數(shù)會(huì)收到一個(gè)事件對(duì)象,可以通過(guò)事件對(duì)象獲得事件相關(guān)數(shù)據(jù)
hanldTap:function(event){
console.log("clickme!");
console.log(event);
}事件對(duì)象-傳輸數(shù)據(jù)很多場(chǎng)景需要在事件處理需要進(jìn)行數(shù)據(jù)傳輸,例如在頁(yè)面處理頁(yè)面跳轉(zhuǎn)時(shí),我們需要傳遞一個(gè)對(duì)象ID或者更加復(fù)雜的信息,這個(gè)時(shí)候我們就可以使用id與dataset這兩個(gè)參數(shù)。Id一般我們傳遞一個(gè)簡(jiǎn)單數(shù)據(jù)可以使用Id進(jìn)行傳值。dataset一般我們傳遞一個(gè)復(fù)雜的對(duì)象信息我們可以使用dataset。
<view
catchtap="hanldTap"id="postId"data-info1="Weixin"data-info2="java"
class="journey-container">
<text
class="journey">開(kāi)啟小程序之旅</text>
</view>事件分類(lèi)-冒泡事件和非冒泡事件事件分為冒泡事件和非冒泡事件:冒泡事件:當(dāng)一個(gè)組件上的事件被觸發(fā)后,該事件會(huì)向父節(jié)點(diǎn)傳遞。非冒泡事件:當(dāng)一個(gè)組件上的事件被觸發(fā)后,該事件不會(huì)向父節(jié)點(diǎn)傳遞。事件分類(lèi)-冒泡事件示例<view
class="container">
<image
class="avatar"src="{{avatar}}"></image>
<text
class="motto">{{motto}}</text>
<view
bindtap="hanldTap"
id="postId"data-info1="Weixin"data-info2="java"class="journey-container">
<text
class="journey"bindtap="hanldTapInner">開(kāi)啟小程序之旅</text>
</view></view>
hanldTap:function(event){
//console.log("clickme!");
//console.log(event);
console.log("父節(jié)點(diǎn)被點(diǎn)擊了");
},
hanldTapInner:function(){
console.log("子節(jié)點(diǎn)被點(diǎn)擊了");
},頁(yè)面代碼綁定事件事件處理函數(shù)運(yùn)行效果注意:在使用冒泡方式,點(diǎn)擊子節(jié)點(diǎn),子節(jié)點(diǎn)target和currentTarget都接收事件對(duì)象都是子節(jié)點(diǎn),而被冒泡的父節(jié)點(diǎn)target接收事件對(duì)象是子節(jié)點(diǎn),currentTarget是父節(jié)點(diǎn)事件分類(lèi)-阻止冒泡事件示例
hanldTap:function(event){
//console.log("clickme!");
//console.log(event);
console.log("父節(jié)點(diǎn)被點(diǎn)擊了");
},
hanldTapInner:function(){
console.log("子節(jié)點(diǎn)被點(diǎn)擊了");
},頁(yè)面代碼綁定事件(使用catchtap方式綁定事件)事件處理函數(shù)運(yùn)行效果<view
class="container">
<image
class="avatar"src="{{avatar}}"></image>
<text
class="motto">{{motto}}</text>
<view
catchtap="hanldTap"
id="postId"data-info1="Weixin"data-info2="java"class="journey-container">
<text
class="journey"catchtap="hanldTapInner">開(kāi)啟小程序之旅</text>
</view></view>注意:在使用非冒泡方式,點(diǎn)擊子節(jié)點(diǎn),子節(jié)點(diǎn)收到事件對(duì)象target和currentTarget都是子節(jié)點(diǎn)微信小程序路由-基本概念在小程序中在小程序中所有頁(yè)面的路由全部由框架進(jìn)行管理??蚣芤詶5男问骄S護(hù)了當(dāng)前的所有頁(yè)面,在微信小程序中API如下:wx.navigateTo(Objectobject)保留當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到tabbar頁(yè)面。使用
wx.navigateBack
可以返回到原頁(yè)面。小程序中頁(yè)面棧最多十層。wx.navigateBack(Objectobject)關(guān)閉當(dāng)前頁(yè)面,返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò)
getCurrentPages
獲取當(dāng)前的頁(yè)面棧,決定需要返回幾層。wx.redirectTo(Objectobject)關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不允許跳轉(zhuǎn)到tabbar頁(yè)面。wx.switchTab(Objectobject)跳轉(zhuǎn)到tabBar頁(yè)面,并關(guān)閉其他所有非tabBar頁(yè)面。wx.reLaunch(Objectobject)關(guān)閉所有頁(yè)面,打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。微信小程序路由-wx.navigateTo使用示例<view
class="container">
<image
class="avatar"src="{{avatar}}"></image>
<text
class="motto">{{motto}}</text>
<view
catchtap="goToPostPage"
class="journey-container">
<text
class="journey">開(kāi)啟小程序之旅</text>
</view>
</view>頁(yè)面綁定頁(yè)面跳轉(zhuǎn)函數(shù)
//處理頁(yè)面跳轉(zhuǎn)函數(shù)
goToPostPage:function(event){
wx.navigateTo({url:
'../posts/posts',
success:function(){
console.log("gotoPostSuccess
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 車(chē)輛抵押貸款風(fēng)險(xiǎn)評(píng)估協(xié)議書(shū)
- 車(chē)輛銷(xiāo)售代理與傭金結(jié)算合同
- 餐飲行業(yè)品牌授權(quán)合同協(xié)議
- 光伏發(fā)電項(xiàng)目投資建設(shè)合同
- 展覽館場(chǎng)地租賃及使用權(quán)轉(zhuǎn)讓合同范本
- 車(chē)輛抵押擔(dān)保金融服務(wù)合同范本
- 2024-2025學(xué)年山東省煙臺(tái)市高一下學(xué)期期中語(yǔ)文試題及答案
- 2024-2025學(xué)年河北省保定市六校協(xié)作體高一下學(xué)期期中地理試題及答案
- 養(yǎng)殖品種選育技術(shù)考核試卷
- 戶外廣告牌切割與焊接技術(shù)的市場(chǎng)細(xì)分與目標(biāo)客戶定位考核試卷
- 相關(guān)方需求和期望表
- 胃腸內(nèi)鏡護(hù)士進(jìn)修匯報(bào)
- 23J916-1 住宅排氣道(一)
- 生物基復(fù)合材料的LCA(生命周期評(píng)估)
- 【核心素養(yǎng)目標(biāo)】人教版物理九年級(jí) 13.1分子熱運(yùn)動(dòng) 教案
- 第四課 拗音 課件初中日語(yǔ)人教版七年級(jí)第一冊(cè)
- 廣東省廣州市天河區(qū)2023-2024學(xué)年八年級(jí)下學(xué)期期末物理模擬試卷
- 甲乙方施工合同范本
- 嬰幼兒配方乳粉市場(chǎng)銷(xiāo)售管理規(guī)范
- 教科版四年級(jí)下冊(cè)科學(xué)期末測(cè)試卷含完整答案(各地真題)
- 2024時(shí)事政治必考試題庫(kù)附答案(完整版)
評(píng)論
0/150
提交評(píng)論