小程序很多控件都有內(nèi)置的樣式贰镣，可能會(huì)出現(xiàn)設(shè)置的樣式表現(xiàn)與純W3C標(biāo)注表現(xiàn)不同转唉；這里記錄下很可能出現(xiàn)的問(wèn)題呼寸，方便的處理方式；
這里要做的需求是嗤无，page中top有一個(gè)50px高度的header-bar震束，box占據(jù)其余部分高度（里面放一個(gè)可滾動(dòng)的列表怜庸，也就是scroll-view）
由于不同設(shè)備高度不同，所以box部分的高度需要是動(dòng)態(tài)的垢村；
有兩種處理方式:
第一種header樣式寫(xiě)死高度50px割疾，在js的data中添加一個(gè)屬性，在頁(yè)面生命周期函數(shù)onload中計(jì)算
<view class='header'>
</view>
<view class='box' style='height:{{boxHeight}}px;'>
</view>
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
boxHeight: 0
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
let res = wx.getSystemInfoSync();
let boxHeight = res.windowHeight - 50;
this.setData({
'boxHeight': boxHeight
});
wx.setNavigationBarTitle({
title: '小程序中動(dòng)態(tài)計(jì)算高度',
})
}
page {
width: 100%;
height: 100%;
background-color: plum;
}
.header {
background: red;
height: 50px;
}
.box {
background: yellowgreen;
}
上一種方式需要計(jì)算比較麻煩嘉栓，特別是有些根據(jù)網(wǎng)絡(luò)請(qǐng)求回來(lái)的內(nèi)容撐高宏榕，還可能要考慮一些數(shù)據(jù)不夠、請(qǐng)求失敗等問(wèn)題侵佃，第二種是利用樣式來(lái)自動(dòng)拉伸麻昼，如使用flex布局
<view class='header'></view>
<view class='box' ></view>
page {
width: 100%;
height: 100%;
background-color: plum;
display: flex;
flex-direction: column;
}
.header {
background: red;
height: 50px;
}
.box {
background: yellowgreen;
flex: 1;
}
11.png
可以看到預(yù)覽完全沒(méi)問(wèn)題，接下來(lái)往里面放一個(gè)滾動(dòng)視圖scroll-view馋辈，設(shè)置為可以垂直滾動(dòng)涌献，高度設(shè)置為100%樣式
<view class='header'>
</view>
<view class='box'>
<scroll-view class='sv' scroll-y='true' style='height:100%;'>
<view>韋神和這位水友打了照面，這樣近的距離下連開(kāi)十槍?zhuān)尤蝗贿@位水友完美躲過(guò)首有。連韋醬都露出了一臉不可置信的表情燕垃！</view>
<view>網(wǎng)友們則不僅因?yàn)檫@位水友的身法表示贊嘆，紛紛表示井联，"被打倒的人總說(shuō)別人的槍法有多好卜壕！拜托，只是你自己的身法沒(méi)到家好嗎烙常！"大家也從韋神被秀一事中收獲了無(wú)限樂(lè)趣轴捎。</view>
<view>不過(guò)，也有網(wǎng)友努力為韋神堪稱(chēng)人體描邊掛的十槍辯解蚕脏，都是因?yàn)檫@位水友喜歡韋神太久了侦副，也太了解韋神了，"當(dāng)喜歡一個(gè)人久了...他的身法驼鞭、他的槍法秦驯、他打的每一顆子彈，甚至每一顆子彈走的路徑挣棕，我都會(huì)了如指掌译隘，所以韋醬他...傷不了我！"</view>
<view>對(duì)此洛心，韋神也轉(zhuǎn)發(fā)肯定了這個(gè)邏輯固耘，并推薦各位網(wǎng)友稱(chēng)："男女朋友的可以試一試，打中一槍?zhuān)f(shuō)明他不夠愛(ài)你词身！" 既然有韋神大力推薦厅目，各位非單身的玩家們不妨一試啊，吃雞究竟是不是一個(gè)愛(ài)情殺手游戲就能見(jiàn)分曉了！ 剛不過(guò)槍?zhuān)柯涞爻珊兴鸱螅渴职咽纸棠愠晒Τ噪u户辫！快關(guān)注兔玩英雄訓(xùn)練營(yíng)返回搜狐，查看更多
</view>
<view>韋神和這位水友打了照面嗤锉，這樣近的距離下連開(kāi)十槍?zhuān)尤蝗贿@位水友完美躲過(guò)渔欢。連韋醬都露出了一臉不可置信的表情！</view>
<view>網(wǎng)友們則不僅因?yàn)檫@位水友的身法表示贊嘆瘟忱，紛紛表示奥额，"被打倒的人總說(shuō)別人的槍法有多好！拜托访诱，只是你自己的身法沒(méi)到家好嗎垫挨！"大家也從韋神被秀一事中收獲了無(wú)限樂(lè)趣。</view>
<view>不過(guò)触菜，也有網(wǎng)友努力為韋神堪稱(chēng)人體描邊掛的十槍辯解九榔，都是因?yàn)檫@位水友喜歡韋神太久了，也太了解韋神了涡相，"當(dāng)喜歡一個(gè)人久了...他的身法哲泊、他的槍法、他打的每一顆子彈催蝗，甚至每一顆子彈走的路徑切威，我都會(huì)了如指掌，所以韋醬他...傷不了我丙号！"</view>
<view>對(duì)此先朦，韋神也轉(zhuǎn)發(fā)肯定了這個(gè)邏輯，并推薦各位網(wǎng)友稱(chēng)："男女朋友的可以試一試犬缨，打中一槍?zhuān)f(shuō)明他不夠愛(ài)你喳魏！" 既然有韋神大力推薦，各位非單身的玩家們不妨一試啊怀薛，吃雞究竟是不是一個(gè)愛(ài)情殺手游戲就能見(jiàn)分曉了刺彩！ 剛不過(guò)槍?zhuān)柯涞爻珊校渴职咽纸棠愠晒Τ噪u乾戏！快關(guān)注兔玩英雄訓(xùn)練營(yíng)返回搜狐迂苛，查看更多
</view>
</scroll-view>
</view>
page {
width: 100%;
height: 100%;
background-color: plum;
display: flex;
flex-direction: column;
}
.header {
background: red;
height: 50px;
}
.box {
background: yellowgreen;
flex: 1;
}
2.png
- 問(wèn)題：可以看到一旦加入scroll-view組件，樣式被破壞了鼓择，header的高度莫名其妙變成了0；
- 疑問(wèn)：小程序的說(shuō)法是要求scroll-view一定要給一個(gè)固定的高度就漾，不然就不行呐能，難道只能用第一種方法來(lái)實(shí)現(xiàn)這個(gè)布局了？
我發(fā)現(xiàn)一個(gè)tip，其實(shí)只要給外圍的box一個(gè)高度即可摆出，隨便一個(gè)高度朗徊，因?yàn)樵O(shè)置了flex拉伸級(jí)別，這個(gè)高度不影響拉伸偎漫；在H5中是沒(méi)意義的爷恳，但是這里可以解決問(wèn)題；
- 最終給一個(gè)完整版本
<view class='header'>
<view>財(cái)經(jīng)</view>
<view>股票</view>
<view>商業(yè)</view>
<view>汽車(chē)</view>
<view>商業(yè)</view>
</view>
<view class='box'>
<scroll-view class='sv' scroll-y='true'>
<view>韋神和這位水友打了照面象踊，這樣近的距離下連開(kāi)十槍?zhuān)尤蝗贿@位水友完美躲過(guò)温亲。連韋醬都露出了一臉不可置信的表情！</view>
<view>網(wǎng)友們則不僅因?yàn)檫@位水友的身法表示贊嘆杯矩，紛紛表示栈虚，"被打倒的人總說(shuō)別人的槍法有多好！拜托史隆，只是你自己的身法沒(méi)到家好嗎魂务！"大家也從韋神被秀一事中收獲了無(wú)限樂(lè)趣。</view>
<view>不過(guò)泌射，也有網(wǎng)友努力為韋神堪稱(chēng)人體描邊掛的十槍辯解粘姜，都是因?yàn)檫@位水友喜歡韋神太久了，也太了解韋神了熔酷，"當(dāng)喜歡一個(gè)人久了...他的身法相艇、他的槍法、他打的每一顆子彈纯陨，甚至每一顆子彈走的路徑坛芽，我都會(huì)了如指掌，所以韋醬他...傷不了我翼抠！"</view>
<view>對(duì)此咙轩，韋神也轉(zhuǎn)發(fā)肯定了這個(gè)邏輯，并推薦各位網(wǎng)友稱(chēng)："男女朋友的可以試一試阴颖，打中一槍?zhuān)f(shuō)明他不夠愛(ài)你活喊！" 既然有韋神大力推薦，各位非單身的玩家們不妨一試啊量愧，吃雞究竟是不是一個(gè)愛(ài)情殺手游戲就能見(jiàn)分曉了钾菊！ 剛不過(guò)槍?zhuān)柯涞爻珊校渴职咽纸棠愠晒Τ噪u偎肃！快關(guān)注兔玩英雄訓(xùn)練營(yíng)返回搜狐煞烫，查看更多
</view>
<view>韋神和這位水友打了照面，這樣近的距離下連開(kāi)十槍?zhuān)尤蝗贿@位水友完美躲過(guò)累颂。連韋醬都露出了一臉不可置信的表情滞详！</view>
<view>網(wǎng)友們則不僅因?yàn)檫@位水友的身法表示贊嘆凛俱，紛紛表示，"被打倒的人總說(shuō)別人的槍法有多好料饥！拜托蒲犬，只是你自己的身法沒(méi)到家好嗎！"大家也從韋神被秀一事中收獲了無(wú)限樂(lè)趣岸啡。</view>
<view>不過(guò)原叮，也有網(wǎng)友努力為韋神堪稱(chēng)人體描邊掛的十槍辯解，都是因?yàn)檫@位水友喜歡韋神太久了巡蘸，也太了解韋神了奋隶，"當(dāng)喜歡一個(gè)人久了...他的身法、他的槍法赡若、他打的每一顆子彈达布，甚至每一顆子彈走的路徑，我都會(huì)了如指掌逾冬，所以韋醬他...傷不了我黍聂！"</view>
<view>對(duì)此，韋神也轉(zhuǎn)發(fā)肯定了這個(gè)邏輯身腻，并推薦各位網(wǎng)友稱(chēng)："男女朋友的可以試一試产还，打中一槍?zhuān)f(shuō)明他不夠愛(ài)你！" 既然有韋神大力推薦嘀趟，各位非單身的玩家們不妨一試啊脐区，吃雞究竟是不是一個(gè)愛(ài)情殺手游戲就能見(jiàn)分曉了！ 剛不過(guò)槍?zhuān)柯涞爻珊兴矗渴职咽纸棠愠晒Τ噪u牛隅！快關(guān)注兔玩英雄訓(xùn)練營(yíng)返回搜狐，查看更多
</view>
</scroll-view>
</view>
page {
width: 100%;
height: 100%;
background-color: plum;
display: flex;
flex-direction: column;
}
.header {
background: red;
height: 50px;
width: 100%;
display: flex;
}
.header > view {
flex: 1;
text-align: center;
line-height: 50px;
color: white;
}
.box {
background: yellowgreen;
flex: 1;
height: 100px;
}
.sv {
background-color: #e9e9;
height: 100%;
}
3.png
