如题,项目需求是做出一个城市列表,但是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: 6 rpx;box-shadow: 0 1px 4px 0 #ccc ;}
.dqcity{ width : 100% ; height : 100 rpx; line-height : 100 rpx; padding-left : 36 rpx;box-sizing:border-box;}
.hot{ height : 90 rpx; line-height : 90 rpx; background-color : #eee ; padding-left : 36 rpx;box-sizing:border-box; color : #9a9a9a ;}
.hot>image{ width : 30 rpx; height : 30 rpx; margin-top : 28 rpx; margin-right : 10 rpx; float : left ;}
.list 1 { width : 100% ; height : 90 rpx; line-height : 90 rpx; padding-left : 36 rpx;box-sizing:border-box; border-bottom : 1px solid #eee ;}
.list 1 >span{ color : #9a9a9a ;}
.tit{ width : 100% ; height : 90 rpx; line-height : 90 rpx; background-color : #eee ; padding-left : 36 rpx;box-sizing:border-box;}
.li{ width : 100% ; height : 90 rpx; line-height : 90 rpx; padding-left : 36 rpx;box-sizing:border-box; border-bottom : 1px solid #eee ;}
.li>span{ color : #9a9a9a ;}
#fr{ width : 80 rpx; position : fixed ; right : 20 rpx; top : 150 rpx; text-align : center ; z-index : 999 ; display :inline- block ;}
#fr>image{ width : 30 rpx; height : 30 rpx;}
.zm{ font-size : 15px ;}
|
那要是fixed容器里面有一个scroll-view,也拖动不了,怎么办
额,我这里把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
>
我也遇到这个问题了 你们最后怎么解决的 ?
同样遇到了这个问题,楼主解决了么?