思考步驟:
1.使用作為根節(jié)點包裹所有view,并動態(tài)綁定scroll-view的scroll-y屬性,自定義它的高度,var calc = clientHeight * rpxR-100; “-100”是因為我底部有選項卡,你若不需要就不用減;
2.點擊button按鈕觸發(fā)showModel事件,子級內(nèi)容顯示,更改isScroll的值為false,關閉彈窗的點擊事件中,更改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="請輸入姓名" type="text" ></input></span>
-
</view>
-
</li>
-
<li data-type="text" class="">
-
<view class="li-inner ">
-
<span class="k">意向級別</span> <span class="v"><button name="custName" placeholder="請選擇" type="text" bindtap='showModel'>請選擇</button></span>
-
</view>
-
</li>
-
</ul>
-
</view>
-
</scroll-view>
-
//這個是子級內(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文件
|