如题,项目需求是做出一个城市列表,但是UI设计的样式是页面不滑动,在一个独立元素中做出滑动效果,这样是没问题可以正常滑动的,但是还有一个fixed定位的侧边栏加上去的时候就会导致进入页面时scroll-view无法滑动的问题,请教下各位大神这是什么情况?![]()
<view id="box">
<scroll-view scroll-y="true" id="con" scroll-into-view="{{toview}}" scroll-with-animation="true">
<view class="dqcity" data-city="{{dw[0]}}" data-code="{{dw[1]}}" bindtap="sdxq" id="dq">当前定位:{{dw[0]}}</view>
<view class="hotcity">
<view class="hot">
<image src='../../imgs/Hot.png'></image>热门城市</view>
<view class="list1" wx:for="{{list1}}" data-city="{{item[0]}}" data-code="{{item[2]}}" bindtap="sdxq">{{item[0]}}
<span>({{item[1]}})</span>
</view>
</view>
<view class="list" wx:for="{{list}}" id="e2">
<view class="tit" id="{{item.zm}}">{{item.zm}}</view>
<view class="li" wx:for="{{item.list}}" wx:for-item="citys" data-city="{{citys[0]}}" data-code="{{citys[2]}}" bindtap="sdxq">{{citys[0]}}
<span>({{citys[1]}})</span>
</view>
</view>
<view id="fr">
<image class="xx" src='../../imgs/Hot.png'></image>
<view wx:for="{{list}}" class="zm" bindtap='tz' data-md="{{item.zm}}">{{item.zm}}</view>
</view>
</scroll-view>
</view>
|
page{width:100%;height:100%;overflow:hidden;background-color:#eee;box-sizing:
border-box;}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
#box{width:100%;height:100%;overflow-x:hidden;}
#con{width:94%;height:96%;margin-left:3%;margin-top:3%;background-color:#fff;border-radius:6rpx;box-shadow:0 1px 4px 0 #ccc;}
.dqcity{width:100%;height:100rpx;line-height:100rpx;padding-left:36rpx;box-sizing:border-box;}
.hot{height:90rpx;line-height:90rpx;background-color:#eee;padding-left:36rpx;box-sizing:border-box;color:#9a9a9a;}
.hot>image{width:30rpx;height:30rpx;margin-top:28rpx;margin-right:10rpx;float:left;}
.list1{width:100%;height:90rpx;line-height:90rpx;padding-left:36rpx;box-sizing:border-box;border-bottom:1px solid #eee;}
.list1>span{color:#9a9a9a;}
.tit{width:100%;height:90rpx;line-height:90rpx;background-color:#eee;padding-left:36rpx;box-sizing:border-box;}
.li{width:100%;height:90rpx;line-height:90rpx;padding-left:36rpx;box-sizing:border-box;border-bottom:1px solid #eee;}
.li>span{color:#9a9a9a;}
#fr{width:80rpx;position:fixed;right:20rpx;top:150rpx;text-align:center;z-index:999;display:inline-block;}
#fr>image{width:30rpx;height:30rpx;}
.zm{font-size:15px;}
|
那要是fixed容器里面有一个scroll-view,也拖动不了,怎么办
额,我这里把fixed的侧边栏元素放置到最外层的时候就可以了
<viewid="top"bindtap='fh'class="{{qmp?'qmp':''}}"><imagesrc='../../imgs/back.png'></image>城市列表</view><viewid="box"><scroll-viewscroll-y="true"id="con"scroll-into-view="{{toview}}"scroll-with-animation="true"><viewclass="dqcity"data-city="{{dw[0]}}"data-code="{{dw[1]}}"bindtap="sdxq"id="dq">当前定位:{{dw[0]}}</view><viewclass="hotcity"><viewclass="hot"id="hot"><imagesrc='../../imgs/Hot.png'></image>热门城市</view><viewclass="list1"wx:for="{{list1}}"data-city="{{item[0]}}"data-code="{{item[2]}}"bindtap="sdxq">{{item[0]}}<span>({{item[1]}})</span></view></view><viewclass="list"wx:for="{{list}}"id="e2"><viewclass="tit"id="{{item.zm}}">{{item.zm}}</view><viewclass="li"wx:for="{{item.list}}"wx:for-item="citys"data-city="{{citys[0]}}"data-code="{{citys[2]}}"bindtap="sdxq">{{citys[0]}}<span>({{citys[1]}})</span></view></view></scroll-view></view><viewid="fr"><imageclass="xx"src='../../imgs/Hot.png'></image><viewwx:for="{{list}}"class="zm"bindtap='tz'data-md="{{item.zm}}">{{item.zm}}</view></view>我也遇到这个问题了 你们最后怎么解决的 ?
同样遇到了这个问题,楼主解决了么?