scroll-view受到一个position：fixed元素的影响无法滑动
发布于 6 年前 作者 xiuyinghu 15721 次浏览 来自 问答

如题，项目需求是做出一个城市列表，但是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;}
3 回复

额，我这里把fixed的侧边栏元素放置到最外层的时候就可以了

<view id="top" bindtap='fh' class="{{qmp?'qmp':''}}">
    <image src='../../imgs/back.png'></image>
    城市列表
</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" id="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>
 
 
    </scroll-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>

同样遇到了这个问题，楼主解决了么？

我也遇到这个问题了   你们最后怎么解决的 ？

回到顶部