版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)
文檔簡介
【移動應(yīng)用開發(fā)技術(shù)】微信小程序如何制作首頁
在下給大家分享一下微信小程序如何制作首頁，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！微信小程序首頁制作簡單實例實現(xiàn)效果圖：首先從大的方面來講，就是設(shè)置了window的屬性"navigationBarBackgroundColor":
"#AFE2E6",//bar背景顏色
"navigationBarTextStyle":
"white",//bar字體顏色
"backgroundColor":
"white",//背景顏色
"enablePullDownRefresh":
"true"http://下拉是否刷新tabBar屬性完整代碼如下（wxml）<view>
<navigator
url='/pages/14/1'>
<view
class="waylist">
<view
class="im
im1">1</view>
<view
class="way">廣從1號線</view>
<view
class="ste">市汽車客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
/>
</view>
</navigator>
<navigator
url='/pages/14/2'>
<view
class="waylist">
<view
class="im
im2">2</view>
<view
class="way">廣從2號線</view>
<view
class="ste">芳村汽車客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
/>
</view>
</navigator>
<navigator
url='/pages/14/3'>
<view
class="waylist">
<view
class="im
im3">3</view>
<view
class="way">廣從3號線</view>
<view
class="ste">羅沖圍汽車客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
class="hidden"
/>
<view
class="jian">></view>
</view>
</navigator>
<navigator
url='/pages/14/4'>
<view
class="waylist">
<view
class="im
im4">4</view>
<view
class="way">廣從4快號線</view>
<view
class="ste">天河客運站
-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
/>
</view>
</navigator>
<navigator
url='/pages/14/5'>
<view
class="waylist">
<view
class="im
im4">4</view>
<view
class="way">廣從4線</view>
<view
class="ste">天河客運站
-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
/>
</view>
</navigator>
<navigator
url='/pages/14/6'>
<view
class="waylist">
<view
class="im
im5">5</view>
<view
class="way">廣從5號線</view>
<view
class="ste">東站汽車客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
/>
</view>
</navigator>
<navigator
url='/pages/14/7'>
<view
class="waylist">
<view
class="im
im6">6</view>
<view
class="way">廣從6號線</view>
<view
class="ste">東圃客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
class="hidden"
/>
<view
class="jian">></view>
</view>
</navigator>
<navigator
url='/pages/14/8'>
<view
class="waylist">
<view
class="im
im7">7</view>
<view
class="way">廣從7號線</view>
<view
class="ste">黃埔客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
class="hidden"
/>
<view
class="jian">></view>
</view>
</navigator>
<navigator
url='/pages/14/9'>
<view
class="waylist">
<view
class="im
im8">8</view>
<view
class="way">廣從8號線</view>
<view
class="ste">廣園汽車客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
class="hidden"
/>
<view
class="jian">></view>
</view>
</navigator>
<navigator
url='/pages/14/10'>
<view
class="waylist">
<view
class="im
im8">8</view>
<view
class="way">廣從8快線</view>
<view
class="ste">廣園汽車客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
class="hidden"
/>
<view
class="jian">></view>
</view>
</navigator>
<navigator
url='/pages/14/11'>
<view
class="waylist">
<view
class="im
im9">9</view>
<view
class="way">廣從9號線</view>
<view
class="ste">滘口汽車客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
class="hidden"
/>
<view
class="jian">></view>
</view>
</navigator>
<navigator
url='/pages/14/12'>
<view
class="waylist">
<view
class="im
im10">10</view>
<view
class="way">廣從10號線</view>
<view
class="ste">越秀南客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
class="hidden"
/>
<view
class="jian">></view>
</view>
</navigator>
<navigator
url='/pages/14/13'>
<view
class="waylist">
<view
class="im
im10">10</view>
<view
class="way">廣從10快線</view>
<view
class="ste">越秀南客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
class="hidden"
/>
<view
class="jian">></view>
</view>
</navigator>
<navigator
url='/pages/14/14'>
<view
class="waylist">
<view
class="im
im11">11</view>
<view
class="way">廣從11號線</view>
<view
class="ste">海珠汽車客運站-從化汽車站</view>
<image
src="/assets/images/subway.jpg"
style="width:30px;
height:30px;"
/>
</view>
</navigator>
</view>wxss.waylist{
display:
flex;
border-bottom:
1px
solid
gray;
font-size:
13px;
}
.waylist
view{
height:40px;
line-height:
40px;
}
.waylist
.im{
width:
25px;
height:
25px;
line-height:
25px;
text-align:
center;
color:white;
margin-top:
7.5px;
margin-right:
5px;
border-radius:
50px;
margin-left:
5px;
}
.ste{
color:gray;
text-align:
left;
font-size:
12px;
width:
60%;
}
.way{
width:
30%;
}
.jian{
text-align:
right;
font-size:
20px;
color:gray;
}
.hidden{
visibility:
hidden;
}
image{
margin-top:5px;
}
.im1{
}
.im2{
}
.im3{
}
.im4{
}
.im5{
}
.im6{
}
.im7{
}
.im8{
}
.im9{
}
.im10{
}
.im11{
}json
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 會場布置合同范本
- 鄉(xiāng)鎮(zhèn)商品房出租合同范本
- pe管材及管件購銷合同范本
- 協(xié)議離婚陰陽合同范本
- 酒店投資合作合同范本
- 燒豬店鋪轉(zhuǎn)讓合同范本
- 櫥柜衣柜制作及其安裝合同范本
- 國際采購合同范本
- 合法用工合同范本
- 教育機構(gòu)培訓(xùn)合同范本
- 白城2025年吉林大安市事業(yè)單位面向上半年應(yīng)征入伍高校畢業(yè)生招聘5人筆試歷年參考題庫附帶答案詳解
- 全球人工智能產(chǎn)業(yè)發(fā)展現(xiàn)狀和趨勢
- 2025年內(nèi)蒙古化工職業(yè)學(xué)院高職單招職業(yè)技能測試近5年?？及鎱⒖碱}庫含答案解析
- 民法典解讀之婚姻家庭編
- 2025年菏澤醫(yī)學(xué)?？茖W(xué)校高職單招數(shù)學(xué)歷年（2016-2024）頻考點試題含答案解析
- 2025年漯河職業(yè)技術(shù)學(xué)院高職單招職業(yè)技能測試近5年?？及鎱⒖碱}庫含答案解析
- Unit 2 What time is it？-A Let's spell（課件）-2024-2025學(xué)年人教PEP版英語四年級下冊
- 2024-2025學(xué)年人教版數(shù)學(xué)六年級下冊第二單元百分?jǐn)?shù)（二）（含答案）
- 創(chuàng)新教案：《歌唱二小放牛郎》在2025年音樂教學(xué)中的應(yīng)用
- 祖沖之的平生與貢獻
- 2025年版護理法律法規(guī)
評論
0/150
提交評論