scroll-view 快速多次改变scroll-into-view属性值后,滑动到的位置就不准确了
< scroll-view class = "content" scroll-into-view = "{{toView}}" scroll-y = "true" scroll-with-animation = "true" > < view wx:for = "{{act_addList}}" > < view class = "address_top" id = "{{ 'inToView'+item.id}}" >{{item.region}}</ view > < view wx:for = "{{item.city}}" > < view class = "address_bottom" >{{item.name}}</ view > </ view > </ view > </ scroll-view > < view class = "orientation_region" > < view class = "orientation" >自动定位</ view > < block wx:for = "{{orientationList}}" > < view class = "orientation_city" bindtap = "scrollToViewFn" data-id = "{{item.id}}" >{{item.region}}</ view > </ block > </ view > |
page{ height : 100% ;} .content{ padding-bottom : 20 rpx; box-sizing: border-box; height : 100% ;} .location{ width : 100% ;} .location_top{ height : 76 rpx; line-height : 76 rpx; background : #f4f4f4 ; color : #606660 ; font-size : 28 rpx; padding : 0 20 rpx;} .location_bottom{ height : 140 rpx; line-height : 140 rpx; color : #d91f16 ; font-size : 28 rpx; border-top : 2 rpx #ebebeb solid ; border-bottom : 2 rpx #ebebeb solid ; padding : 0 20 rpx; align-items: center ; display : -webkit-flex;} .address_top{ height : 76 rpx; line-height : 76 rpx; background : #f4f4f4 ; color : #999999 ; font-size : 28 rpx; padding : 0 20 rpx;} .address_bottom{ height : 88 rpx; line-height : 88 rpx; background : #fff ; color : #000000 ; font-size : 32 rpx; padding : 0 20 rpx; border-bottom : 2 rpx #ebebeb solid ; margin-left : 20 rpx; margin-right : 50 rpx; } .location_img{ width : 48 rpx; height : 48 rpx; position : absolute ; right : 20 rpx; top : 125 rpx;} .add_city{ width : 228 rpx; height : 60 rpx; line-height : 60 rpx; text-align : center ; border : 2 rpx solid #ebebeb ; color : #000000 ; margin-right : 20 rpx; } .add_citying{ width : 228 rpx; height : 60 rpx; line-height : 60 rpx; text-align : center ; border : 2 rpx solid #09bb07 ; color : #09bb07 ; margin-right : 20 rpx;} .orientation{ white-space : normal ; display : inline- block ; width : 55 rpx; height : 58 rpx; color : #999 ; text-align : center ;} .orientation_region{ width : 55 rpx; font-size : 20 rpx; position : fixed ; top : 220 rpx; right : 0 rpx;} .orientation_city{ height : 50 rpx; line-height : 50 rpx; color : #000 ; text-align : center ;} |
Page({ /** * 页面的初始数据 */ data: { orientationList: [ { id: "01" , region: "东北" }, { id: "02" , region: "华北" }, { id: "03" , region: "华东" }, { id: "04" , region: "华南" }, { id: "05" , region: "华中" }, { id: "06" , region: "西北" }, { id: "07" , region: "西南" } ], act_addList: [ { id: "01" , region: "东北地区" , city: [{ id: "0101" , name: "白山江源" }, { id: "0102" , name: "白山市" }, { id: "0103" , name: "宾县" }, { id: "0104" , name: "大庆" }, { id: "0105" , name: "测试1" }, { id: "0106" , name: "测试2" }, { id: "0107" , name: "测试3" }, { id: "0108" , name: "测试4" }, { id: "0109" , name: "测试5" }, { id: "0110" , name: "测试6" }, ] }, { id: "02" , region: "华北地区" , city: [{ id: "0201" , name: "包头" }, { id: "0202" , name: "保定" }, { id: "0206" , name: "测试2" }, { id: "0207" , name: "测试3" }, { id: "0208" , name: "测试4" }, { id: "0209" , name: "测试5" }, { id: "0210" , name: "测试6" }, ] }, { id: "03" , region: "华东地区" , city: [{ id: "0303" , name: "开封市" }, { id: "3104" , name: "安阳市" },] }, { id: "04" , region: "华南地区" , city: [ { id: "0401" , name: "黑龙江市" }, { id: "0407" , name: "测试3" }, { id: "0508" , name: "测试4" }, { id: "0609" , name: "测试5" }, { id: "0710" , name: "测试6" }, { id: "0711" , name: "测试8" }, { id: "0712" , name: "测试9" }, { id: "0713" , name: "测试10" }, { id: "0714" , name: "测试11" }, ] }, { id: "05" , region: "华中地区" , city: [{ id: "0501" , name: "黑龙江市" }] }, { id: "06" , region: "西北地区" , city: [{ id: "0603" , name: "开封市" }, { id: "0604" , name: "安阳市" },] }, { id: "07" , region: "西南地区" , city: [{ id: "0703" , name: "开封市" }, { id: "0704" , name: "安阳市" }, { id: "0401" , name: "黑龙江市" }, { id: "0407" , name: "测试3" }, { id: "0508" , name: "测试4" }, { id: "0609" , name: "测试5" }, { id: "0710" , name: "测试6" }, { id: "0711" , name: "测试8" }, { id: "0712" , name: "测试9" }, { id: "0713" , name: "测试10" }, { id: "0714" , name: "测试11" }, { id: "0401" , name: "黑龙江市" }, { id: "0407" , name: "测试3" }, { id: "0508" , name: "测试4" }, { id: "0609" , name: "测试5" }, { id: "0710" , name: "测试6" }, { id: "0711" , name: "测试8" }, { id: "0712" , name: "测试9" }, { id: "0713" , name: "测试10" }, { id: "0714" , name: "测试11" }, ] }, ], toView: 'inToView01' , }, scrollToViewFn: function (e) { var _id = e.target.dataset.id; this .setData({ toView: 'inToView' + _id }) console.log( this .data.toView) }, onLoad: function (options) { } }) |
这个问题2020年还是存在
scroll-with-animation="true"这个属性导致滚动有延迟,然后导致scroll-with-animation="true"设置不准确
做了个类似通讯录的锚点定位,通过touch 快速滑动字母,定位就不准确了。
今天是2020.4.27日,此问题依然存在!
后来有解决这个问题吗?
这个问题只要我快速多次改变scroll-into-view属性值才出现,
不是 快速 就没这个问题
id是没放错位置的,我已经加了一个固定高度,问题也是一样
<
scroll-view
class
=
"content"
style
=
"height:500px"
scroll-into-view
=
"{{toView}}"
scroll-y
=
"true"
scroll-with-animation
=
"true"
>
<
view
wx:for
=
"{{act_addList}}"
wx:key
=
"id1"
id
=
"{{ 'inToView'+item.id}}"
>
<
view
class
=
"address_top"
>{{item.region}}</
view
>
<
view
wx:for
=
"{{item.city}}"
wx:key
=
"id2"
>
<
view
class
=
"address_bottom"
>{{item.name}}</
view
>
</
view
>
</
view
>
</
scroll-view
>
<
view
class
=
"orientation_region"
>
<
view
class
=
"orientation"
>自动定位</
view
>
<
block
wx:for
=
"{{orientationList}}"
wx:key
=
"id3"
>
<
view
class
=
"orientation_city"
bindtap
=
"scrollToViewFn"
data-id
=
"{{item.id}}"
>{{item.region}}</
view
>
</
block
>
</
view
>
id
=
"{{ 'inToView'+item.id}}"这个id放错位置了吧?还有使用竖向滚动时,需要给
<scroll-view/>
一个固定高度,通过 WXSS 设置 height。你再试一试?