wxml(weixin markup language)是框架設計的一套標籤語言,結合基礎元件、事件系統,可以構建出頁面的結構。
}
page(
})
**簡直和上面沒區別啊**
page(
})
不要直接寫 checked="false",其計算結果是乙個字串
hidden
} + } + d
page(
})
5}}">
}
page(
})
項的變數名預設為item
wx:for-item
可以指定陣列當前元素的變數名
下標變數名預設為index
wx:for-index
可以指定陣列當前下標的變數名
}: }
page(, ]
}})
渲染乙個包含多節點的結構塊 block最終不會變成真正的dom元素
}:
}
提高效率使用的
在框架中,使用wx:if="}"
來判斷是否需要渲染該**塊:
true
也可以用wx:elif
和wx:else
來新增乙個 else 塊:
5}}"> 1
2}}"> 2
3
block wx:if
因為wx:if
是乙個控制屬性,需要將它新增到乙個標籤上。如果要一次性判斷多個元件標籤,可以使用乙個標籤將多個元件包裝起來,並在上邊使用
wx:if
控制屬性。
view1
view2
注意:
並不是乙個元件,它僅僅是乙個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。
hidden
就簡單的多,元件始終會被渲染
,只是簡單的控制顯示與隱藏
。
true
類似wx:if
不同是hiden控制顯影,而if控制是否渲染
因此,如果需要頻繁切換的情景下,用hidden
更好,如果在執行時條件不大可能改變則wx:if
較好。
標籤,image元件預設寬度320px、高度240px
屬性名型別
預設值說明
srcstring
mode
string
'scaletofill'
裁剪、縮放的模式
lazy-load
boolean
false
懶載入。只針對page與scroll-view下的image有效
mode 有效值:
mode 有 13 種模式,其中 4 種是縮放模式,9 種是裁剪模式。模式值
說明縮放
scaletofill
不保持縱橫比縮放,使的寬高完全拉伸至填滿 image 元素
縮放aspectfit
保持縱橫比縮放,使的長邊能完全顯示出來。
縮放aspectfill
保持縱橫比縮放,只保證的短邊能完全顯示出來。
縮放widthfix
寬度不變,高度自動變化,保持原圖寬高比不變
裁剪top
不縮放,只顯示的頂部區域
裁剪bottom
不縮放,只顯示的底部區域
裁剪center
不縮放,只顯示的中間區域
裁剪left
不縮放,只顯示的左邊區域
裁剪right
不縮放,只顯示的右邊區域
裁剪top left
不縮放,只顯示的左上邊區域
裁剪top right
不縮放,只顯示的右上邊區域
裁剪bottom left
不縮放,只顯示的左下邊區域
裁剪bottom right
不縮放,只顯示的右下邊區域
預設寬度 100% 高度 150px
屬性名型別
預設值說明
indicator-dots
boolean
false
是否顯示面板指示點
indicator-color
color
rgba(0, 0, 0, .3)
指示點顏色
indicator-active-color
color
#000000
當前選中的指示點顏色
autoplay
boolean
false
是否自動切換
interval
number
5000
自動切換時間間隔
circular
boolean
false
是否採用銜接滑動
滑塊預設寬度和高度都是100%
屬性名型別
預設值說明
srcstring
duration
number
controls
boolean
true
autoplay
boolean
false
loop
boolean
false
muted
boolean
false
微信小程式頁面布局
3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,flex布局的特點 1.任意方向的伸縮,向左,向右,向下,向上 2.在樣式層可以調換和重排順序 3.主軸和側軸方便配置 4.子元素的空間拉伸和填充 5.沿著容器對齊23 顯示效果 block改換成di...
微信小程式頁面布局
1.flex布局,是w3c在2009年提出的一種新的方案,可以簡便,完整,響應式的實現各種頁面布局。2.flex布局提供了元素在容器中的對齊,方向以及順序,甚至他們可以是動態的或者不確定的大小的。3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,fl...
微信小程式頁面跳轉
每乙個列表對應著都有乙個詳情頁面,那麼這個詳情頁面可以通過乙個標籤去跳轉,也就是用上述的標籤就可以數顯跳轉 那麼對應列表裡面的詳情頁我們還需要在這個鏈結上進行乙個操作。也就是在鏈結後面 新增乙個對應的id引數,然後js裡面去接受這個引數,就會根據資料來跳轉到對應的詳情頁去了。exports.gets...