頭部和尾部固定，中間內容不固定，實現的效果為當頁面第二部分內容較少時三個部分剛好佔滿螢幕，當內容較多時第二步分高度自適應，第三部分緊跟第二部分
wxm檔案中的高度在讀取到的資料較多時是如何判斷的呢？
index.wxml
第一部分內容，高度是固定的rpx
第二部分內容，內容較少時占用剩下螢幕填充整個高度，內容較多時出現滾動條 第二部分內
第三部分內容，高度是固定的rpx,緊跟第二部分
index.wxss
.class_first {
background-color: #666;
color: #fff;
/高度固定300rpx/
height: 300rpx;
.class_second {
background: #e5e5e5;
color: #000;
.class_third {
background-color: rgba(241, 238, 12, 0.918);
color: #fff;
/高度固定200rpx/
height: 200rpx;
index.js
page({
data: {
second_height: 0
onload: function(options) {
let that = this
// 獲取系統資訊
wx.getsysteminfo({
success: function(res) {
console.log(res);
// 可使用視窗寬度、高度
console.log('height=' + res.windowheight);
console.log('width=' + res.windowwidth);
// 計算主體部分高度,單位為px
that.setdata({
// second部分高度 = 利用視窗可使用高度 - first部分高度(這裡的高度單位為px，所有利用比例將300rpx轉換為px)
second_height: res.windowheight - res.windowwidth / 750 * 500
微信小程式 布局
傳送門 傳送門 語法 margin auto length 引數 margin 10px 11px 9px 8px 按順序分別代表物件與父容器的上 右 下 左的距離值為10px,11px,9px,8px。auto 值被設定為相對邊的值 length 由浮點數字和單位識別符號組成的長度值 百分數。百分...
微信小程式 小程式樣式WXSS
wxss weixin style sheets 是 套樣式語 於描述 wxml 的元件樣式。與 css 相 wxss 擴充套件的特性有 1.響應式 度單位 rpx rpx responsive pixel 可以根據螢幕寬度進 適應。規定螢幕寬為 750rpx 如在iphone6 上，螢幕寬度為 3...
微信小程式頁面跳轉
每乙個列表對應著都有乙個詳情頁面，那麼這個詳情頁面可以通過乙個標籤去跳轉，也就是用上述的標籤就可以數顯跳轉 那麼對應列表裡面的詳情頁我們還需要在這個鏈結上進行乙個操作。也就是在鏈結後面 新增乙個對應的id引數，然後js裡面去接受這個引數，就會根據資料來跳轉到對應的詳情頁去了。exports.gets...