微信小程序实现web端锚点功能

1.wxml布局样式

<view class='container'><view class='left'><scroll-view class='leftScroll' scroll-y><block wx:for="{{list}}" wx:key="list"><view bindtap='clickScroll' data-id="{{item}}">{{item}}</view></block></scroll-view></view><view class='right'><scroll-view class='rightScroll' scroll-y scroll-into-view="{{toView}}" scroll-with-animation="true"><block wx:for="{{list}}" wx:key="list"><view bindtap='clickScroll' id="{{item}}">{{item}}</view></block></scroll-view></view></view>

2.wscc样式

page{width:100%;height:100%;}.container{flex-direction: row;height:100%;}.left{width:100px;height:80%;}.left scroll-view{height:100%;}.left view{padding:10px;text-align: center;background-color:#0f0;margin-bottom:10px;color:#fff;}.right{flex:1;height:80%;}.right scroll-view{height:100%;}.right view{height:150px;background-color:#f00;color:#fff;margin-bottom:10px;}

3.js

Page({
data: {list: ["list0", "list1", "list2", "list3", "list4", "list5", "list11", "list12", "list13", "list14", "list15", "list25", "list26", "list27", "list28", "list29", "list30"],toView: ''},clickScroll:function(e){var id = e.currentTarget.dataset.idthis.setData({toView:id})console.log(e.currentTarget.dataset);},})

转载于:https://www.cnblogs.com/yuan9580/p/11344007.html

微信小程序实现web端锚点功能相关推荐

java webpack web项目_官方出品，微信小程序和 Web 端同构解决方案——kbone
介绍最近在琢磨一些小程序开发和移动web开发,偶然间在Github上看到了这样一个项目--kbone,一个致力于微信小程序和 Web 端同构的解决方案.微信小程序的底层模型和 Web 端不同,我们想 ...
微信小程序客服端实现拨号功能
微信小程序客服端实现拨号功能微信小程序拨号功能是需要经常用到的功能之一,微信拨号功能,当用户需要联系平台客服,点击拨号界面,会跳转到手机拨号页面进行电话拨打. WXML:本页面号码为虚拟号码,请填写 ...
山东大学项目实训（四）—— 微信小程序扫描web端二维码实现web端登录
效果点击登录后,显示二维码→打开"探古"(本项目)微信小程序,扫描二维码确认登录→web端登录成功主要流程因为本人主要负责web前端的开发,所以本文仅介绍web前端的实现方法 ...
axure 小程序 lib_【kboneui】打通 H5/微信小程序，多端UI库
前言有了UI库,便捷性提高很多.今日早读文章由腾讯@binnie投稿分享. 正文从这开始-- kbone-ui 的方式是以小程序内置组件和拓展组件为对齐目标, 使用 weui 样式提供 H5 和小 ...
浅谈对腾讯云微信小程序解决方案服务端的理解（主要针对信道服务）
浅谈对腾讯云微信小程序解决方案服务端的理解(主要针对信道服务) 参考文章: (1)浅谈对腾讯云微信小程序解决方案服务端的理解(主要针对信道服务) (2)https://www.cnblogs.com/ ...
10分钟上线 - 利用函数计算构建微信小程序的Server端
摘要: 阿里云函数计算是一个事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.微信小程序是一种不需要下载安装即可使用的应用,它可以在微信内被便捷地获取和传播. 当 ...
微信小程序基于scroll-view实现锚点定位
代码地址如下: http://www.demodashi.com/demo/14009.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
口令红包-利用函数计算构建微信小程序的server端
摘要: 阿里云函数计算是一个事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.微信小程序是一种不需要下载安装即可使用的应用,它可以在微信内被便捷地获取和传播. 当 ...
微信‘小程序’： web前端的春天 or 噩梦?
最近大家看到这张图是不是都快吐了?这两天一睁眼就被这张图刷屏了喵了咪的,点到哪里都是这个报道和新闻最近因为工作和生活略忙,爱吹文章的我,更新频率也低了,在这里抱个歉,希望大家理解和包容,希望&q ...

微信小程序实现web端锚点功能

微信小程序实现web端锚点功能相关推荐

最新文章

热门文章