时间:2021-05-18
微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃:
利用: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="{{ '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>WXSS:
JS:
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) { } })感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序地图(map)实例这里是小编对微信小程序地图(mapAPI)做的资料整理,获取当前的地址,应该如何实现的实例,大家可以看下。今天做到地图定位的模块.模
本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能。分享给大家供大家参考,具体如下:效果图实现原理采用高德地图微信小程序开发AP
在微信小程序中,使用scroll-view实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用的scroll-into-view属性。 实现锚点跳
在html中设置锚点定位我知道的有几种方法,在此和大家分享一下:1、使用id定位:复制代码代码如下:锚点1111111111111111111111111111
微信小程序与php实现微信支付的简单实例小程序访问地址:payfee.PHP:include'WeixinPay.php';$appid='';$openid=