思考步驟:
1.使用作為根節(jié)點(diǎn)包裹所有view,并動(dòng)態(tài)綁定scroll-view的scroll-y屬性,自定義它的高度,var calc = clientHeight * rpxR-100; “-100”是因?yàn)槲业撞坑羞x項(xiàng)卡,你若不需要就不用減;
2.點(diǎn)擊button按鈕觸發(fā)showModel事件,子級(jí)內(nèi)容顯示,更改isScroll的值為false,關(guān)閉彈窗的點(diǎn)擊事件中,更改isScroll的值為true
貼出主要代碼 :
wxml文件
-
<view class="cusEdit">
-
<scroll-view scroll-y="true" style="height:{{winHeight}}rpx">
-
-
<view class="form-group first">
-
<ul class="basicMsg">
-
<li data-type="text" class="">
-
<view class="li-inner ">
-
<span class="k">姓名</span> <span class="v"><input name="custName" placeholder="請(qǐng)輸入姓名" type="text" ></input></span>
-
</view>
-
</li>
-
<li data-type="text" class="">
-
<view class="li-inner ">
-
<span class="k">意向級(jí)別</span> <span class="v"><button name="custName" placeholder="請(qǐng)選擇" type="text" bindtap='showModel'>請(qǐng)選擇</button></span>
-
</view>
-
</li>
-
</ul>
-
</view>
-
</scroll-view>
-
//這個(gè)是子級(jí)內(nèi)容
-
<scroll-view>
-
<view id='cientWill' class="hide{{showView?'show':''}}">
-
</view>
-
</scroll-view>
-
</view>
css文件
-
::-webkit-scrollbar{
-
width: 0;
-
height: 0;
-
color: transparent;
-
}
-
.hide{
-
display: none
-
}
-
.show{
-
display: block;
-
}
-
scroll-view{
-
width:100%;
-
height:100%;
-
}
-
#cientWill{
-
position: fixed;
-
width: 750rpx;
-
height: 100vh;
-
overflow: auto;
-
padding: 0 20rpx;
-
top: 0;
-
left: 0;
-
background:#fff;
-
z-index: 999;
-
}
js文件

|