網(wǎng)上很多寫mpvue的坑丧慈,有的我踩過了馍迄,有的還沒來得及踩吧……·
但是踩過并且覺得新人經(jīng)常會踩的就說下吧Q薹汀麦备!
1、新建頁面
mpvue新建一個頁面,
1)要重新npm run dev凛篙,這個沒得說
2)要再app.json里面添加路徑黍匾,也沒的說
3)要注意的是,pages下面要新建一個文件夾鞋诗,里面的vue文件和js文件名最好是不變的膀捷,都是index.vue和main.js因為在main.js里面要import App from './index/如果vue文件不是index.vue的話會報錯的!削彬!
2全庸、mpvue用for循環(huán)必須要加key
<div class="icon" v-for="(item,index) of iconslist" :key="index"></div>
3、mpvue 中設(shè)置頁面背景色:
要寫個沒有scoped的style融痛,因為json里面"backgroundColor": "#eeeeee",不是頁面背景色壶笼,是窗口·背景色,下拉刷新才能看到的雁刷!
<style>
page {
background-color: #f9f9f9; //這個才是真正的我們想要的背景色覆劈!
}
</style>
4、mpvue使用小程序的textarea怎樣布局:
<div>
<textarea placeholder="請寫下參加聚會的感受……(140字以內(nèi))"
placeholder-style="" class="boxarea" v-model="commentdsc"></textarea>
</div>
設(shè)置外層divpadding是上下無沛励,左右有责语,設(shè)置textarea的padding是上下有,左右無目派,否則會混亂@ず颉!企蹭!
div {
padding: 0 10px;
background:#fff;
margin: 20px 0;
}
.boxarea {
width: 100%;
padding: 10px 0;
}
5白筹、mpvue 小程序picker組件,時間選擇怎樣讓開始日期在結(jié)束日期之前谅摄。結(jié)束日期不能選擇在開始日期的前面:
設(shè)置開始日期得結(jié)束是結(jié)束日期的選值徒河,設(shè)置結(jié)束日期的開始是開始日期的選值
<picker mode="time" :value="time1" :end="time2" @change="bindTimeChange1">
<div class="picker pickerright">
{{time1}}
</div>
</picker>
picker mode="time" :value="time2" :start="time1" @change="bindTimeChange2">
<div class="picker pickerright">
{{time2}}
</div>
</picker>
data{
return{
time1: "00:00", //初始值
time2: "23:59"
}
}
bindTimeChange1(e) {
this.time1 = e.target.value; //picker使用后,讓value值發(fā)生改變送漠,去更新綁定value的變量
},
bindDateChange1(e) {
this.date1 = e.target.value;
}
6顽照、mpvue巨大的坑,下面這些不能寫作組件名闽寡,包含也不行0衾濉!:
否則會報一個奇怪的錯下隧!
a
canvas
cell
content
countdown
datepicker
div
element
embed
header
image
img
indicator
input
link
list
loading-indicator
loading
marquee
meta
refresh
richtext
script
scrollable
scroller
select
slider-neighbor
slider
slot
span
spinner
style
svg
switch
tabbar
tabheader
template
text
textarea
timepicker
trisition-group
trisition
video
view
web