微信小程式前端頁面書寫

2022-01-12 14:16:03 字數 3250 閱讀 2032

wxml(weixin markup language)是框架設計的一套標籤語言,結合基礎元件、事件系統,可以構建出頁面的結構。

}
page(

})

**簡直和上面沒區別啊**
page(

})

不要直接寫 checked="false",其計算結果是乙個字串

hidden
} + } + d
page(

})

5}}">
}
page(

})

項的變數名預設為itemwx:for-item可以指定陣列當前元素的變數名

下標變數名預設為indexwx:for-index可以指定陣列當前下標的變數名

}: }

page(, ]

}})

渲染乙個包含多節點的結構塊 block最終不會變成真正的dom元素

}: 

}

提高效率使用的

在框架中,使用wx:if="}"來判斷是否需要渲染該**塊:

true
也可以用wx:elifwx: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...