收藏
回答

scroll-view受到一个position:fixed元素的影响无法滑动

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


回答关注问题邀请回答
收藏

4 个回答

  • 能闹不能闹
    能闹不能闹
    2021-06-23

    那要是fixed容器里面有一个scroll-view,也拖动不了,怎么办

    2021-06-23
    有用
    回复
  • 2018-07-03

    额,我这里把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>


    2018-07-03
    有用
    回复
  • 爱秀的演员
    爱秀的演员
    2018-07-03

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


    2018-07-03
    有用
    回复
  • L26_cc
    L26_cc
    2018-03-24

    同样遇到了这个问题,楼主解决了么?

    2018-03-24
    有用
    回复
登录 后发表内容