小程序开发之实现楼层锚点跳跃实例详解

小程序开发之实现楼层锚点跳跃实例详解
这篇文章主要介绍了微信小程序实现锚点定位楼层跳跃的实例的相关资料,需要的朋友可以参考下

这篇文章主要介绍了微信小程序实现锚点定位楼层跳跃的实例的相关资料,需要的朋友可以参考下

微信小程序实现楼层锚点跳跃，点击不同的锚点进行位置跳跃：

利用：scroll-into-view 来实现

效果图如下：

WXML:

<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="{{ &#39;inToView&#39;+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>