微信小程式中乙個表單多個picker選擇器

2022-09-07 04:30:11 字數 1225 閱讀 8954

官方文件--picker元件

mvvm的設計思想:關注model的變化,讓mvvm框架去自動更新dom的狀態,從而把開發者從操作dom的繁瑣步驟中解脫出來!

比如通過data-bind進行資料雙像繫結,就像極了vue的設計風格;

再比如一些標籤語法糖,列表迴圈:

} 

相信寫過angularjs 和 vue的同學都不會陌生;

再比如,事件繫結:

} 

page(,

add: function(e) )}})

這和之前寫js、html時代的操作dom來實現頁面效果,最大的不同就是所有的操作都是取運算元據、操作data通過data的改變來實現頁面效果。

二、需求分析

點選增加出差詳情,增加乙個子項,這裡需要注意的是在乙個表單裡面會有多個選擇框。

當我們分析如何實現這個功能的時候,其實就是分析使用怎樣的data資料結構來儲存這個表單,通過對data資料的增加刪除來實現動態功能。

如下所示:

[

//第乙個出差詳情

,//第二個出差詳情

,//第三個出差詳情

//以此類推。。。

]

三、功能實現
新增

}

}

}

}

//獲取應用例項

page(]},

//事件處理函式

changeregin1: function (ev) )

console.log(this.data.array)

},changeregin2: function (ev) )

console.log(this.data.array)

},begindatechange1:function(ev))

console.log(this.data.array)

},begindatechange2: function (ev) )

console.log(this.data.array)

},add:function());

this.setdata()

console.log(this.data.array)

}})

微信小程式表單

先看看效果 確認提交麼?提示 清空成功 page toast1change function e 彈出確認框 modaltap function e confirm one function e cancel one function e 彈出提示框 modaltap2 function e mod...

小程式picker標題 微信小程式之picker

下面來介紹小picker,分三種樣式 預設的自己可以定義資料的 mode time 是時間選擇器 mode date 是日期選擇器 跟其他的一樣先來看下picker.wxml picker 選擇器地區選擇器 當前選擇 時間選擇器 當前選擇 日期選擇器 當前選擇 picker.wxss page ba...

微信小程式 表單form

表單form的應用很廣泛,我們可以利用form設計登入註冊,也可以設計一種答題問卷的形式,今天主要講一下form的使用 form表單,將元件內輸入的 switch input checkbox slider radio picker 的值進行提交,資料的格式為 name value,所以表單中控制項...