分享微信小程序上怎样实现sticky效果的列表页
具体参照饿了么APP的商品列表页（小程序版本发现并未实现）
具体的效果及实现可以查看一下这个demo =& sticky demo on codepen
简单地说就是标题会有粘黏的效果，向下滑动时跟着列表走，向上滑动到顶部时将会固定在顶部。
但是如果在不考虑兼容性的情况下（6以上、 Safari9.1+、 chrome56+）
其实从3开始有一个position属性sticky就能实现这种效果
只需要这两行就能实现，然而...然而兼容性那是相当的差，那么好用的一个属性为什么兼容性那么差呢？
利用scroll-view里的scroll-into-view属性，具体可查看小程序的文档 实现sticky效果（可参照 codepen 的 demo） 获取每个scroll-into-view的scrollTop 监听scroll的滚动，并改变scroll-into-view
&scroll-view scroll-y class=&left-wrapper& id=&left&&
&view wx:for=&...& bindtap=&...&&&/view&
&!--这里是左侧的类型选择--&
&/scroll-view&
&scroll-view scroll-y
class=&right-wrapper&
bindscroll=&onScroll&
scroll-into-view=&{{toView}}&
id=&right&&
&view wx:for=&{{items}}& wx-for-item=&item& class=&lists& id=&{{item.title}}&&
&view class=&type-title& style=&{{style}}&&
&!-- 这个就是ticky header部分 --&
{{item.title}}
&view class=&content&&
&view wx:for=&{{item.child}}& class=&item&&
&!--这里是需要展示具体的列表项--&
&/scroll-view&
左侧列表页没什么好讲的，无非就是按下某个类型，给上一个checked样式，然后改变toView（关键）的值。
那么toView是什么呢？toView的值是和scroll-view里面你需要跳转的view的id对应起来的，也就是代码中的这个id
所以当左侧按下对应的按钮以后，右侧的scroll就会跳转到相应id的scroll-into-view里面，
其实到目前为止已经实现了sticky header + 跳转的问题了
如果滑动右侧的滚动条的话，左侧的数据如何跟着变化呢？
假如不是小程序的话应该很多人都知道怎么做，无非就是监听滚动条，判断滚动条的位置，然后根据区域去改变左侧的选择。
小程序如果获得scroll-into-view在scroll-view里面的位置呢？？？
小程序是没有类似document.getElementById()这种Dom操作的
也没法使用JQuery的$去快捷地获取scrollTop的
也不能像vue一样直接操作$el的
还好小程序在1.4时开放了一个接口wx.createSelectorQuery()
wx.createSelectorQuery()
返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点，并使用boundingClientRect等方法选择需要查询的信息。
nodesRef.boundingClientRect([callback])
添加节点的布局位置的查询请求，相对于显示区域，以像素为单位。其功能类似于DOM的getBoundingClientRect。返回值是nodesRef对应的selectorQuery。
返回的节点信息中，每个节点的位置用left、right、top、bottom、width、height字段描述。如果提供了callback回调函数，在执行selectQuery的exec方法后，节点信息会在callback中返回。
然后可以通过这个方法拿到所有的scroll-into-view的位置
let query = wepy.createSelectorQuery()
for (let i = 0; i & this.types. ++i) {
let id = this.types[i]
query.select(`#${id}`).boundingClientRect((rect) =& {
this.scrollTops[id] = rect.top
这个操作必须得放在onReady ()的时候去做，否则将无法得到rect属性
得到这个属性以后其实就很好操作了，直接上代码了
onScroll (event) {
// 如果是右侧的滚动view
if (event.currentTarget.id === 'right') {
// 判断滚动的方向
let top = event.detail.scrollTop
this.dir = this.currentTop & top ? 'down' : 'up'
this.currentTop = top
// 判断当前滚动条所在区域，如果不在当前区域则进行跳转
if (top & this.scrollTops[this.getNextView()] &&
this.dir === 'down' &&
this.checked & this.types.length - 1) {
this.setChecked(this.checked + 1)
if (top & this.scrollTops[this.toView] &&
this.dir === 'up' &&
this.checked & 0) {
this.setChecked(this.checked - 1)
然后一个简单的具有sticky效果的商品列表页跳转功能就实现了。
scroll-view必须设置高度，否则在IOS上将无法使用scroll-into-view跳转 使用createSelectorQuery必须在页面渲染完成以后
scroll会有个惯性运动，这时候按左侧的按钮切换scroll-into-view会和onScroll事件发生一些冲突，测试IOS存在有该问题，希望大神给予些指导意见。
由于采用了wepy构建的小程序，所以在部分代码上会和小程序有出入（改过一些），主要是思路。
顺便丢个wepy的github
wepy的本意是希望小程序能像vue一样开发，由于本人一直在用vue做项目，所以用wepy开发小程序会顺手一些，但是wepy虽然尽力贴合vue，但在某些设计上存在着一定的问题，但相对来说比直接开发小程序用起来舒服一些。您的位置：&>& >
> 微信小程序怎么打开？微信小程序打开方法
微信小程序怎么打开？微信小程序打开方法[多图]
字体大小：【 |
11:17:49&&&
类型：便捷生活大小：37.22MB评分：10平台：标签：
是一款微信刚刚上线的新功能，很多网友都不知道微信小程序怎么打开，下面和小编一起来了解一下吧。
微信小程序怎么打开？微信小程序打开方法
1、首先需要将微信升级到6.5.3这个版本，在检查更新里可以升级；
2、升级完成打开微信，点击页面最上方的搜索，在这里输入：小程序示例；
3、搜索后选择第一个：小程序示例；
4、然后点击进去以后就已经激活了小程序了；
专题类型：社交
更新时间：
专题标签：生活服务玩机必备资讯攻略
今天满屏都是微信小程序的消息！可以在线申请内测，这是开发的小应用！很多朋友都很期待！微信小程序专题里包含了微信小程序下载、微信小...
5.0友情指数
0人0人
猜你喜欢生活服务互动腾讯视频聊天
想让你的生活从此刻开始变得更轻松吗？想让自己过上更智慧的生活模式吗？想自己也能轻松掌握自己的生活节奏吗？来这里任意下一款app都可以让你的生活变得更简单哦。一些...
微信小程序软件资讯95
微信小程序软件教程22
微信小程序常见问题1
(您的评论需要经过审核才能显示)【微信小程序】微信小程序发布 微信小程序怎么用 微信小程序开发文档→十大品牌网
【微信小程序】微信小程序发布 微信小程序怎么用 微信小程序开发文档
【微信小程序】微信小程序发布 微信小程序怎么用 微信小程序开发文档
阅读：7895次
日，张小龙和他的团队，正式发布了微信小程序。现在只要有开发者登录小程序后台，并在开发管理页面点击了发布按钮，就会有一个小程序，降临到这个世界上。那么，小程序到底是什么？小程序的入口在哪里？小程序到底如何使用？该去哪里找小程序呢？买购网小编为您一一解答。
微信小程序正式发布
你好！微信小程序
日，在iPhone迎来发布10周年之际，微信创始人张小龙在他的朋友圈中贴出了一组2007年iPhone发布会现场的照片，这场发布会具有标志性意义，张小龙就这样在朋友圈中向苹果致敬。与此同时，微信母公司腾讯控股推出了一套针对智能机用户的网络应用，开始进入苹果和谷歌通过各自移动系统长期主导的地盘，它就是微信小程序，这个平台可能会在未来10年挑战苹果。紧接着，微信朋友圈中一条“你好，我是小程序”的链接流传开来，很多常用的手机APP纷纷在微信中推出了小程序版本。
微信小程序是什么
微信小程序
微信小程序，简称CX，它是一种不需要下载、安装，用户只要在微信中扫一扫或者搜一下即可打开的应用；用完之后，退出页面即可，用户不需要对它进行卸载，它也不会再打扰用户，更不会推送消息、不会产生订阅关系、不能被推送到朋友圈。更直观地说，它是由微信推出的，一个可代替APP的部分功能、但又不像APP那样需要用户进行下载卸载等繁琐操作，且更省空间的一个应用。
微信小程序怎么用
微信小程序入口在哪
最新微信为什么没有小程序
1、升级你的微信到最新的6.5.3版本。
2、在微信的第一个页面顶端，有一个搜索条，在搜索条里输入：小程序示例，然后搜索。点最下面的：搜一搜 小程序示例 朋友圈、公众号、文章等。
3、选择第一个结果，图标是黑色斜写的英文字母“S”，点开它。
4、看到这个页面的时候，你就已经激活了小程序。不需要做任何额外的操作。
5、退出上面这个页面，点开你的微信第三页面“发现”。当当当当!最下面就出现了小程序的入口。
微信小程序添加方式
公众号关联
微信小程序推荐
从视频体验来看，得益于Android由于系统的开放，我们可以将小程序放到桌面上，点开即可跳转到小程序页面，当微信在后台运行时，基本秒开，启动速度比APP还快！去哪里能找到这些小程序呢？就像关注微信公众号一样，你得知道它的名字，或者二维码，才能使用一款小程序。可是，微信里并没有提供一个集中展示小程序的地方。小编为您推荐大量有趣、实用的小程序，让你迅速找到你想要的小程序。
【高频使用】
美团外卖 滴滴公交查询 车来了 大众点评 京东购物 摩拜单车 滴滴出行DiDi 携程酒店机票火车票
驴妈妈门票预订 飞常准查航班 海南航空微应用 南航e行 去哪儿出行 朋友家精选民宿 熊猫签证 去哪儿酒店预订
国际品牌价格 小小包麻麻好物 好药师优选 汽车之家Autohome 手机查报价 有赞精选 什么车好 微店轻便版 Coolbuy玩物志 美的官方商城 腾讯周边 订蛋糕元祖黑天鹅诺心21cake 新品有戏应用
滴滴公交查询 车来了 租租车出国去哪玩 巴士管家 知了交通
【健康医疗】
姨妈日历 美柚APP 经期月月记 好药师优选 孕期提醒APP 柚宝宝App 药顾问 丁香医生
嗨图 MOTIF米田图案壁纸小工具 名画滤镜APP 今日名画 小蚁AI艺 Miatou 藏识相册
我的计算器 朝夕日历Pro 印象笔记微清单 亲戚关系 100房贷助手 查地铁 Coolbuy玩物志 看剧小助手 约会来也 老板管账 掌上探路者生活 序列号查查 小程序示例 解忧室 股票灯塔 艺术签名助手 延迟退休计算器 汽车报价库 签到打卡 实时空气质量 自选股 高校图书馆查询 小小房贷计算器 新股申购宝 最新汇率查询 汇率e 二手车e 记账e 翻译e 通勤助手 留学公寓助手 云梦助眠引导 蚂蚁待办 蚂蚁微日记 窝牛App
小程序开放的服务和功能
服务和功能
从内测信息来看，小程序在通过向开发者开放多种服务及支撑能力以实现以上设想，主要面向开发者，这些服务和支撑能力包括：
视图容器：视图(View)、滚动视图、Swiper
基础内容：图标、文本、进度条
表单组件：按钮、表单等等
媒体组件：音频、图片、视频
地图位置服务
文件操作能力
网络：上传下载能力、WebSocket
数据：数据缓存能力
位置：获取位置、查看位置
设备：网络状态、系统信息、重力感应、罗盘
界面：设置导航条、导航、动画、绘图等等
开放接口：登录，包括签名加密，用户信息、微信支付、模板消息
微信小程序有哪些功能
微信小程序提供的功能：
1. 提供小程序页概念：支持分享当前信息，例如分享00700股票页面，好友打开时看到的是00700股票的实时信息，而无需再次启动小程序。
2. 对话分享：可以分享到对话，支持分享给单个好友及微信群。
3. 搜索查找：小程序可以被搜索，但微信会极力限制搜索能力，目前提供的搜索功能是用户可直接根据名称或品牌搜索小程序。。
4. 公众号关联：在小程序与公众号为同一开发主体的前提下，提供小程序与微信公众号之间的关联。
5. 线下扫码：提供线下提示用户附近有哪些小程序存在的功能。用户可以通过线下扫码使用，这也是微信提倡的接入方式。
6. 小程序切换：小程序支持挂起状态，即多窗口概念，用户可以把小程序先挂起，然后做别的事情，在需要这个小程序的时候可以快速调用，回到最开始的状态。
7. 消息通知：商户可以发送模板消息给接受过服务的用户，用户可以在小程序内联系客服，支持文字和图片，解决用户与小程序的沟通问题。
8. 历史列表：用户使用过的小程序会被放入列表，方便下次使用。
微信小程序不提供的功能：
1. 小程序在微信没有集中入口。
2. 微信不会推出小程序商店，也不会向用户推荐小程序。
3. 小程序没有订阅关系，没有粉丝，只有访问，只有访问量。
4. 小程序不能推送消息。
5. 小程序不能做游戏。
谁适用微信小程序
哪些服务和企业最适合接入小程序
象限1：大玩家、高频应用不应该接入和拥抱小程序。这个象限基本上都是大玩家，比如，360、百度、。因为用户经常打开，而且交互频次很高，对应用的体验要求很高，比如直播、游戏、视频等。
象限2：应该毫不犹豫拥抱小程序。
这个象限包含了大量的服务类产品。教育、医疗、家政、求职招聘、二手买卖、旅游、票务、金融理财、汽车后市场，当然理论上还有12306！总之，但凡用户一年用个一两次之后就再也想不起来的，是不应该用一个原生引用的方式让用户下载，而应该是通过微信小程序来解决。
象限3：应该慎重接入，利用微信的开放能力，引入用户到自有产品中。MVP后，尽快引导到自由产品，因为自有产品能提供更好的服务，并且能留下用户，比如知乎、网易云音乐。内容型的产品，通过微信获得新用户，然后转移到自有平台，也是一个很好的策略。
象限4：视乎情况接入，主要看开发能力。如果你的人是做APP的，那就还是APP吧，如果是H5的，那就微信小程序。
小程序可以取代APP吗？他们说……
可减轻手机压力
手机里的APP太多了，有的APP一个月用一次，可是又不能删，占内存还麻烦。小程序虽然不能代替APP所有功能，但应该会减轻手机负荷上的压力。
不能取代高频使用的APP
IT男小雷表示：“如果高频使用的APP能覆盖我需要的功能，那么我不会再通过微信扫码弄个小程序来，这有点节外生枝的感觉。”
在某些方面有好的表现
“小程序在刚需低频、随机应用、媒体形态的移动互联网方面上，会有不错的斩获。”互联网分析师、夸克传媒创始人王如晨对此表示。
不能取代综合服务APP
微信本身就是一个超级APP，它需要移动终端的承载，也需要应用商店或其他集成应用的渠道；小程序在垂直性比较明显的行业应用，以及具备生态协同的领域，比如吃喝玩乐的综合服务，不可能将之取代。
微信小程序开发文档
本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。
官方文档教程1：
官方文档教程2：
监制： 蓝一飞
主编： Wendy
设计： 文婷
制作： YIMI
您可能关心的是：
(C) 版权声明：本站为注册用户提供信息存储空间服务，网页上的内容均是注册用户发布上传或搜索引擎技术自动搜录所得，不代表本站观点，更不表示本站支持购买和交易，对网页中内容之合法性、准确性、真实性、适用性、安全性等概不负责，也无法负责。版权归原作者所有，如有侵权、虚假信息、错误信息或任何问题，请及时联系我们，我们将在第一时间删除或更正。
提交说明：
您还未登录，依《网络安全法》相关要求，请您登录账户后再提交发布信息。如您还未注册，可，感谢您的理解及支持！
日，微信之父张小龙解读了微信的四大价值观，拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫微信小程序...
微信已经成为人们日常生活中必不可少的工具。买房还是卖房？萨德现在什么情况了？国足赢了没…… 每个人都有自己不同的偏好和习惯。没有来自微信的社...
提起经典的广告语，你最先想到的是哪个品牌的哪句呢？广告语，作为品牌或产品的宣传口号，直接反映了背后经营者对市场消费的定位与策略。一句广告语若...
十大数据是企业品牌信用指数（见会员等级和服务）以及几十项数据统计计算真实呈现的结果，无需企业申请申报，不存在评定评选的过程，企业不需要交纳任何费用，无偿服务于广大消费者 |
本页面内容不代表十大品牌网观点或支持购买，仅提供参考使用 | 查询数据是为了消费者选购到市面上最好的品牌(品牌消费)，不是认定认证，不是竞价排名，不是表彰评选，不是评奖评比 |
R/TM/C图形文字为公司或相关单位商标版权,受法律保护 请勿转载 | 复制请注明出处 未经授权 禁止转载本站名单(数据)，认准唯一正宗谨防假冒！
<a class="kefu fff" href="javascript:void(0);" id="kefu" isten='true' onclick="if($('#chatbox').length微信小程序怎么使用 微信小程序在哪里打开
- 绿茶文章中心
&&&&&&&&&微信小程序怎么使用 微信小程序在哪里打开
微信小程序怎么使用 微信小程序在哪里打开
作者：佚名
来源：绿茶软件园
　　微信小程序怎么使用？一月九日，一年之约，微信小程序如期而至，但还有用户不清楚，那么微信小程序在哪里打开呢？下文小乐哥给大家介绍一下！
　　微信小程序怎么使用？
　　微信小程序如约上线，用户可以通过扫描二维码、搜索等方式体验到开发者们推出的微信小程序了。但需要用户升级到微信最新版本，在聊天页上方搜索框搜索相关小程序，体验到小程序之后，用户就可以在&发现&页面里看到&小程序&选项。
　　微信小程序共有8大主要功能，包括提供小程序页概念、线下扫码、对话分享、消息通知、小程序切换、历史列表、公众号关联和搜索查找等。
　　另外为了便于微信用户继续使用聊天的主要功能，微信小程序可以显示在聊天窗口顶部，这意味着用户在使用小程序的过程中可以快速返回至聊天界面，而在聊天界面也可快速进入小程序，实现小程序与聊天之间的便捷切换。
本类推荐本类排行
热门软件热门标签微信小程序打开详细图解
微信小程序怎么打开？微信小程序打开详细图解
　　今天凌晨，小程序正式上线，相信很多人都已经开始使用了。而小编也想尝尝鲜，打开微信却发现并没有传说中的微信小程序功能，明明小编的微信是最新版本，这是为什么呢？那么， 微信小程序怎么打开？经过一番研究，小编终于发现了方法，下面，就让小编为大家带来微信小程序打开详细图解，一起来看看吧。
　　1、打开微信，发现没有微信小程序，请允悲。。。
微信小程序
　　2、来到微信页面，找到搜索框；
微信小程序
　　3、在搜索框输入美团外卖，或者，搜索；
大家都在下
还没关注下载之家微信 的亲们赶紧扫一扫左侧的二维码吧！或搜账号:
还没关注下载之家微信 的亲们赶紧扫一扫左侧的二维码吧！或搜账号:
微信公众号
Copyright &
下载之家(www.xiazaizhijia.com).All Rights Reserved
备案号：闽ICP备号-8
京公网安备 19号}