為了項(xiàng)目需求，讓背景圖片不滑動(dòng)搀军，內(nèi)容部分滑動(dòng)膨俐。所以html抡秆，body設(shè)為width:100%;height:100%;根節(jié)點(diǎn)設(shè)置為width:100%;height:745px;background:url("../...png") no-repeat;
由于body為一屏大小，所以不可滑動(dòng)吟策，此時(shí)要給根節(jié)點(diǎn)加個(gè)滑動(dòng)組件包裹所有的可滑動(dòng)部分儒士。但由于使用滑動(dòng)組件，導(dǎo)致原來里面一個(gè)能左右滑動(dòng)的div不能滑動(dòng)了檩坚，應(yīng)該是沖突了着撩。此時(shí)應(yīng)該使用flex
html部分
<div class="historyList" v-if="historyStationList.length" >
? ? ? ? ? <VScroll class="historyScroll"
? ? ? ? ? :scrollingX=true
? ? ? ? ? :scrollingY=false
? ? ? ? ? >
? ? ? ? ? <div class="stationArea">
? ? ? ? ? ? <div
? ? ? ? ? ? class="stationLabel"
? ? ? ? ? ? v-for="(item, index) in historyStationList"
? ? ? ? ? ? :key="index"
? ? ? ? ? ? @click="clickHistoryStaion(index)"
? ? ? ? ? ? >
? ? ? ? ? ? <p>{{item["depCity"].deptCityName}}-{{item["arrCity"].arrCityName}} </p>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? ? </VScroll>
? ? ? ? ? <div class="clearHistoryList" @click="clearHistoryStation">
? ? ? ? ? ? 清除歷史
? ? ? ? ? </div>
? ? ? ? </div>
css部分：
.historyList{
? .flexbox;
? .flex-direction(row);
? font-size: 24*@rmw2;
? margin:12*@rmw2 -10*@rmw2 -10*@rmw2 -10*@rmw2;
? width: 100%;
? .historyScroll{
? ? width: 80%;
? ? .flexbox;
? ? .stationArea{
? ? ? .flexbox;
? ? ? .flex-direction(row);
? ? ? .align-items(center);
? ? ? height:40*@rmw2;
? ? ? padding:6*@rmw2 4*@rmw2;
? ? ? box-sizing: border-box;
? ? ? .stationLabel{
? ? ? ? color: #999;
? ? ? ? margin-right: 29*@rmw2;
? ? ? ? text-align: center;
? ? ? ? display: inline-block;
? ? ? ? p {
? ? ? ? ? white-space: nowrap;
? ? ? ? }
? ? ? }
? }
}
? .clearHistoryList{
? ? margin-left: 20*@rmw2;
? ? width: 20%;
? ? display: inline-block;
? ? color: #4b93ff;
? ? font-size: 24*@rmw2;
? ? margin-right: -0.32rem;
? ? height: 40*@rmw2;
? ? line-height: 40*@rmw2;
? ? margin-top: 0*@rmw2;
? ? text-align: right;
? }
}
