1. 程式人生 > >微信小程序學習打卡(2)

微信小程序學習打卡(2)

lin color navigator 微信 navig 實現 url 底部導航 inf

一、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;
} 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等路徑不能有錯 技術分享圖片

微信小程序學習打卡(2)