微信小程序學習打卡(2)
阿新 • • 發佈:2018-04-10
lin color navigator 微信 navig 實現 url 底部導航 inf
}
3、元素大小適配不同寬度屏幕:
px:絕對單位
rpx響應式長度
4、navigator標簽 實現頁面跳轉
<view>
<text>我</text><navigator url=‘/pages/weekly/weekly‘ style=‘display:inline;‘ open-type=‘navigate‘ hover-class=‘nav-hover‘ class=‘nav-default‘>每周推薦</navigator><text>一部好片</text>
</view>
默認頁面可返回
open-type=‘navigate‘
頁面不可返回
open-type=‘redirect‘
控制點擊時樣式
hover-class=‘nav-hover‘
註意: 根據級聯樣式算法,樣式按照先後順序應用
5、tabBar底部導航欄
在app.json文件中配置tabBar底部導航欄
"tabBar":{
"list": [
{
"text": "關於",
"pagePath": "pages/about/about",
"iconPath": "images/icons/about.jpg",
"selectedIconPath": "images/icons/about-selected.jpg"
},
{
"text": "每周推薦",
"pagePath":"pages/weekly/weekly",
"iconPath":"images/icons/weekly.jpg",
"selectedIconPath":"images/icons/weekly-selected.jpg"
}
],
"color":"#000",
"selectedColor":"#00f"
}
用list數組存放導航欄的樣式 註意:page配置不能在文件中寫任何註釋,pagePath等路徑不能有錯
一、wxml文件:類似於html,<標簽名 屬性=“屬性值”></標簽名>
屬性值可為: 類 class=“info”
id id=“zzz”
樣式 style=" "
事件函數 bindtap="f0"
自定義數據 data-user-name=“user”
隱藏當前標簽內容 hidden=“true”
imge標簽:<image src="/images/xx.jpg"></image>
絕對路徑:/images/xx.jpg
相對路徑:../../images/xx.jpg
二、wss文件
頁面布局:
1、傳統方式:無法靈活應對頁面結構變化
.container{ background-color: #eee; text-align: center; } text{ display: block; } image,text{ margin-bottom: 60px; }2、彈性盒子布局:實現整體控制,靈活應對頁面結構變化
.container{ background-color: #eee; display: flex; flex-direction: column; justify-content: space-around; align-items: center;
微信小程序學習打卡(2)