微信小程式 自定義滾動彈窗

2021-10-12 10:12:33 字數 2225 閱讀 6814

實現**:

wxml:

class

="showmodal"

bindtap

="showmodal_click"

>

喚出彈窗button

>

class

="modal-mask"

bindtap

="hidemodal"

catchtouchmove

="preventtouchmove"

wx:if

="}"

>

view

>

class

="modal-dialog"

wx:if

="}"

>

class

="modal-title"

>

標題view

>

class

="modal-title-sc"

>

副標題view

>

class

="modal-content"

>

scroll-y

="true"

style

="height

:100px;

">

wx:for

="}"

wx:key

="id"

>

class

="info"

>

class

="name_list"

>

}view

>

class

="quantity_list"

>

×}view

>

class

="reason_list"

>

}view

>

button

>

block

>

scroll-view

>

view

>

class

="modal-content-return"

>

此處可隨意新增文字內容

view

>

class

="modal-footer"

>

class

="btn-cancel"

bindtap

="oncancel"

data-status

="cancel"

>

取消view

>

class

="btn-confirm"

bindtap

="onconfirm"

data-status

="confirm"

>

確定view

>

view

>

view

>

wxss:

.showmodal

/*以下全是彈窗樣式*/

.modal-mask

.modal-dialog

.modal-title

.modal-title-sc

.modal-content

.info

.info::after

.name_list

.quantity_list

.reason_list

.modal-content-return

.modal-footer

.btn-cancel

.btn-confirm

js:

page(,

onload:

function()

,,,,

,,]this

.setdata()

},showmodal_click:

function()

)},//彈窗事件

hidemodal:

function()

);},

oncancel:

function()

, onconfirm:

function()

})

直接拿過去就可以用,data裡面的內容可以動態獲取

微信小程式自定義彈窗

首先wxml 暫無有關資訊 點選此處 注 hidden屬性用於切換比較頻繁的地方。wxss 設定彈窗樣式 mytoast js page onload function options onready function onshow function onhide function onunload...

微信小程式之自定義toast彈窗

第一步 新建乙個wxml檔案用來裝模板,方便以後使用,比如 然後在這裡面新增模板 template name toast name相當於模板的標識,引用的時候好判斷引用哪乙個 view class toast out wx if wx if是條件渲染,使用這個是為了好判斷是否顯示或隱藏toast v...

小程式 自定義彈窗後禁止螢幕滾動(滾動穿透)

彈出 fixed 彈窗後,在彈窗上滑動會導致下層的頁面一起跟著滾動。解決方法 在彈出層加上 catchtouchmove 事件 示例 modal view hidden bindtap togglemodal catchtouchmove preventtouchmove modal modal i...