微信小程序仿微信、QQ 向左滑动删除操作实现教程
首先看下页面效果：
本人比较懒， 删除动作有点太生硬， 实在看不惯的同学可以加个动画上去。
OK 下面来看代码
首先是 wxml 里面绑定事件
&view class=&item-wrapper&&
&view class=&item-list& wx:for=&{{itemData}}& wx:for-item=&item& wx:for-index=&index& wx:key=&that&&
&view class=&item-info& data-index=&{{index}}& bindtouchstart=&touchS& bindtouchmove=&touchM& bindtouchend=&touchE& &
&image class=&info-img& src=&{{item.img}}&&&/image&
&view class=&info-wrapper&&
&view class=&info-desc&&
&view class=&name&&{{item.name}}&/view&
&view class=&time&&{{item.time}}&/view&
&view class=&info-content&&{{item.info}}&/view&
&view class=&item-oper&&
&view class=&oper-delete& bindtap=&itemDelete& data-index=&{{index}}&&删除&/view&
主要就是用的小程序的 touch 事件来进行处理
样式就不说了， 可以自己写， 不想写的同学也可以拿来直接用。
然后就是事件的处理函数了
touchS: function (e) {
// touchstart
let startX = App.Touches.getClientX(e)
startX && this.setData({ startX })
touchM: function (e) {
// touchmove
let itemData = App.Touches.touchM(e, this.data.itemData, this.data.startX)
itemData && this.setData({ itemData })
touchE: function (e) {
// touchend
const width = 150
// 定义操作列表宽度
let itemData = App.Touches.touchE(e, this.data.itemData, this.data.startX, width)
itemData && this.setData({ itemData })
itemDelete: function(e){
// itemDelete
let itemData = App.Touches.deleteItem(e, this.data.itemData)
itemData && this.setData({ itemData })
事件函数主演也是 touch 的三个事件还有删除事件， 每个事件的核心是更新数据， 也就是 setData()
数据处理函数
数据处理的函数我单独拿了出来， 这样有利于复用。 放在 utils 文件夹下的 Touches.js 文件里面
touchM(e, dataList, startX) {
// touchmove 过程中更新列表数据
let list = this._resetData(dataList)
list[this._getIndex(e)].left = this._getMoveX(e, startX)
return list
touchE(e, dataList, startX, width) {
// touchend 更新列表数据
let list = this._resetData(dataList)
let disX = this._getEndX(e, startX)
let left = 0
if (disX & 0) {
// 判断滑动方向， （向左滑动）
// 滑动的距离大于删除宽度的一半就显示操作列表 否则不显示
Math.abs(disX) & width / 2 ? left = -width : left = 0
// 向右滑动复位
list[this._getIndex(e)].left = left
return list
deleteItem(e, dataList) {
// 删除功能
dataList.splice(this._getIndex(e), 1)
return dataList
每个函数都有注释说明， 相信都能看得懂， 就不多解释了。
有什么更好的方法， 或建议欢迎提出。您的位置：
关于微信小程序(应用号)，看看这篇文章就够了
作者：i黑马
　　不是所有服务都适合接入小程序。
　　9月21日晚，微信宣布：微信“小程序”开始内测。
　　自年初1月11日张小龙在北京微信公开课上发言起，历经大半年后，万众瞩目的“微信应用号”终于现身。相比“应用号”，“小程序”这个名字更加可爱。以名字看，感觉像是突出了“将你的程序接入微信”的意思。
　　我们此前分析过微信的功能迭代节奏：一般微信重要的功能规划周期，大约会在在9-12个月的时间里，这样算起来，这次应用号从规划到上线，节奏也蛮符合。
　　我们先看下面这张据传是张小龙发在朋友圈关于小程序的评论：
　　关于这张图片，前半段我理解为小程序是微信内的云端应用，不是原生App，对用户来说很轻(对开发者来说也会更轻)。
　　后半句则应该理解为：用户用完就退出程序，离开别人的服务，但继续在自己的微信里玩朋友圈，看文章。
　　昨晚微信小程序上线后，很多朋友跑来问我对这个事情的看法，我就借这篇文章一并回答了。先说几个结论：
　　1.不是所有的服务都适合接入小程序，但大部分创业者的服务都适合接入其中。后面我们会重点分析。
　　2.小程序是基于H5开发的程序，但用了类似于JS-SDK的框架(百度以前是clouda框架)，提供了更多的接口和组件，让程序更加流畅，体验接近原生APP(Native App)。
　　3.能够云端发布程序(当然也需要微信审核)，同时也能缓存数据，实现了借助微信这个最大的Native App来让H5 App更强大的目的。
　　4.目前没有受到邀请也不要怕，按照微信操盘节奏，一定是灰度推进的。这个灰度包括对用户的逐步释放，也包括多开发者的分层授权和管理等，但不代表先发就一定有优势，后面竞争的还是产品本身，而不是时间的早晚。
　　5.大家都期望通过基于微信可以获得营销、获客和传播能力，那微信小程序释放的能量是否能满足大家的需求呢?我觉得比较悬，在产品营销和微信的克制之间，主动权还是在微信手上。
　　6.H5和JS人才将会很抢手，大家可以储备一些了。
　　微信发展到小程序这个阶段应该说是有其背后的野心的。只是微信的野心一直都装在产品的盒子里，保护得很好。
　　聊到野心，我们要先看看微信的发展历程。
　　从IM到浏览器到OS的改变
　　我曾经将微信的发展阶段分为三个阶段：IM阶段、浏览器阶段和OS阶段。IM阶段的大招是语音通信和摇一摇，浏览器阶段的大招是订阅号，OS阶段的大招可能就是小程序。
　　应该说，借助语音通信、摇一摇和朋友圈，微信迅速地建立了自己的IM优势，加上腾讯本身具有的关系链这个核心资产，微信快速获得过亿的用户。
　　而浏览器其实是OS的一种(参阅google的Chrome OS)，主要的能力是解析Html(当然包括H5)，在这个基础上，订阅号是最大的受益者，也是最强的引领者。
　　OS的核心是搭建一个平台，在上面跑服务(调用本地的server和传送云端的service)，小程序这次就是借助微信这个超级Native app，将本地应用的优势，通过微信赋能给第三方服务提供者。这是有显而易见的好处的，这个好处后面会分享。
　　此外，我认为，微信应用号会是连接人和服务的尝试，它将可能在后续完全替代掉“服务号”。
　　从互联网整体的发展和腾讯公司的整体战略来看，过去的十年，互联网解决了人与信息、商品和人的链接，未来的十年一定是链接人与服务。
　　而服务更多的是垂直的、细分的、非标准的，腾讯自己做显然是很难做到的，虽然腾讯也投资了大量的服务公司，但毕竟还有很多新兴服务和潜在的服务无法概括进来，如果有一个产品能够让所有的服务都接入进来，在这个产品上能够将服务与人直接连接，那显然是价值巨大的。
　　小程序则有可能会担负这个任务。一头是7亿用户，一头是服务提供者，通过微信平台，将海量用户与海量服务进行对接，完美!所以名字虽然是小程序，看起来很Q，但野心绝对是大的很啊!
　　以上简单说了一下小程序的背景，接下来，我们会详细地和大家分析几个事情：
　　· 哪些服务和企业最适合接入应用号
　　· 如果开发者接入应用号，产品的架构和逻辑是怎么样的?
　　· 开发者注意：基于微信小程序开发，也得拼爹
　　· 未来的小程序还留给我们哪些重要的期待
　　我们依次来看。
　　1.哪些服务和企业最适合接入应用号?
　　应该说，不是所有的服务都适用小程序，但大部分的服务和几乎所有的初创业务都是可以接入小程序的。
　　哪些服务是可以接入，哪些又是不可以接入的呢?我先看一个模型。按照重要/不重要，高频/低频，我们将互联网产品分别放入四个象限。
　　然后，我们分别看这4个象限的拥抱策略，应该说，如果你的服务是很高频的，而且对于交互和界面体验的要求很高的话，还是要用原生(Native)来做。但如果你是低频/中频且重要的服务的话，你应该毫不犹豫地加入微信小程序的申请队伍。
　　象限1：大玩家、高频应用不应该接入和拥抱小程序。
　　这个象限基本上都是大玩家，比如，3BA(360、百度、阿里巴巴)。
　　· 阿里和百度显然不会接入。
　　· 高频且重要的应用不会接入。因为用户经常打开，而且交互频次很高，对应用的体验要求很高，比如直播、游戏、视频等。
　　· 对数据安全度比较高的不应该接入。虽然微信只是读取了接口，不会直接让服务者提交数据，但因为小程序一定会提供缓存功能，开发者的服务虽然基于H5，但你是跑在微信这个原型框架内的。
　　象限2：应该毫不犹豫拥抱小程序。
　　这个象限包含了大量的服务类产品。
　　教育、医疗、家政、求职招聘、二手买卖、旅游、票务、金融理财、汽车后市场，当然理论上还有12306!
　　总之，但凡用户一年用个一两次之后就再也想不起来的，是不应该用一个原生引用的方式让用户下载，而应该是通过微信小程序来解决。
　　初创型企业也应该通过小程序来试探MVP产品，因为微信拥有天然的传播能力和获客能力，而原生应用除了开发比较复杂外，推广成本极高，获客成本极高，这些都阻碍了MVP的产品探索。
　　从这个角度来说，小程序能让中国初创的互联网公司减少试错成本，提升成功概率。
　　象限3：应该慎重接入，利用微信的开放能力，引入用户到自有产品中。
　　MVP后，尽快引导到自由产品，因为自有产品能提供更好的服务，并且能留下用户，比如知乎、网易云音乐。
　　内容型的产品，通过微信获得新用户，然后转移到自有平台，也是一个很好的策略。
　　象限4：视乎情况接入，主要看开发能力。
　　基本上很多都是个人兴趣产品、工具产品，可以从MVP的角度来做，或者以兴趣的角度来做，不考虑太多的商业产出，只考虑情怀，但这些开发者有个明显的问题，就是产品设计能力和开发能力有限，所以，如果你的人是做APP的，那就还是APP吧，如果是H5的，那就微信小程序呗。
　　2.如果开发者接入应用号，产品的架构和逻辑是怎么样的?
　　如果你打算接入小程序了，你可以试着了解下这套玩法的基本架构和逻辑关系。用户会频繁和微信交互，微信也会频繁与OS交互，当然微信也通过API的方式来获取第三方的数据，并且通过服务组件、开发工具和交互框架来定义小程序的交互样式、展现方式和扩展功能。
　　有两个方向，小程序会极大降低开发的难度。
　　· 组件与前端控件：根据目前透露的情况来看，微信小程序提供了基础组件、前段原生控件和API，目的是让一个云端的H5产品具有原生应用的组件和扩展能力。这些组件，之前是由第三方来提供的框架，这次小程序，把更多的权限也开放出来了，来帮助开发者快速接入小程序，尽量标准化和结构化去处理数据。
　　· 交互框架：早在上半年，微信就已经开始公布了一套UI和交互框架，用来统一UI规范和交互示例。这些UI规范和交互示例早早就准备好，我们有理由相信，你就是一个初级程序员，没有UI、没有前端，只会写后台PHP，也可以通过接入API的方式完成自己的小程序。
　　3.开发者注意：基于微信小程序开发，也得拼爹
　　事实上，让大家激动不已的绝对不是上面的小程序的框架、逻辑、组件这些事，因为这样的事情国外的Facebook、国内的百度都有做过。大家最期待的，是微信的关系链，而关系链本身，则是微信的命根子，这次的小程序，关系链会开放吗?我觉得是呵呵。拼爹吧。
　　首先，关系链并非不可以开放，是有条件的开放。
　　上图可以看到，这基本上算是三个开放的逻辑了。
　　· 只开放公开信息：昵称、头像，其实也就是登陆ID，所有的开发者都可以接入，比如航旅纵横。
　　· 有条件开放：开放共同使用的好友。比如大众点评。所以基于大众点评，你可以看到有好友去哪。比如美团外卖，可以看到好友头条，比如58同城旗下的转转，能看到好友在卖，但很抱歉，这个关系链的开放，目前只有腾讯投资的公司，才能享受如此特权。
　　· 更大程度的开放：除了登陆和好友关系，还开放了朋友圈权限，能把一些操作直接输送到朋友圈做动作，这个很抱歉，只有腾讯自由的产品才有，比如，QQ音乐、腾讯视频等。
　　大概的逻辑是：
　　· 亲儿子，能得到全部关系;
　　· 干儿子，能得到重合的关系，你用，我也用，相互能看到，我用你不用，我不能跟你发生联系。
　　· 外人，只能刷个脸，其他的免谈。
　　所以，大家先别激动的太早，小程序目前的开放程度还是很低的，离Facebook的全能力开放还是有差距的。
　　4.总结，未来的小程序还留给我们哪些重要的期待
　　小程序是微信的一小步，但可能是移动互联网的一大步。而微信的这套玩法，特别适合于中国市场，我们也希望这套玩法能推向全球，成为标杆产品。
　　通过阶段性的释放微信的能力，将大量的开发者和服务圈入微信生态系统，让用户真正的离不开微信，完成微信建立一座在线城市的愿望。
　　在目前看到的第一阶段，我认为微信还是会先让小程序的流程走通、邀请一些开发者来做高配和的产品打磨，毕竟现在的小程序还是MVP产品。中期来看，小程序将能够让微信实现从内容到服务的生态闭环，既能增加微信周边功能的能力(如支付、地图、广告)，也能巩固微信的唯一的移动入口地位。
　　最后的最后，如果小程序的入口是这么深的话：
　　大家还是先观察一下效果，再来决定是否要拥抱吧。
(转载请保留)
置顶推荐热门话题
您刚刚看过
互联网的一些事，已超50万小伙伴关注！71 条评论分享收藏感谢收起赞同 41 条评论分享收藏感谢收起写回答微信小程序中实现一对多发消息详解及实例代码
转载 &更新时间：日 16:25:57 & 作者：Voyager3
这篇文章主要介绍了微信小程序中实现一对多发消息详解及实例代码的相关资料,需要的朋友可以参考下
微信小程序中实现一对多发消息详解及实例代码
微信小程序中各个界面之间的传值和通知比较蛋疼。所以模仿了iOS中的通知中心，在微信小程序中写了一套类似的通知中心。
通知中心可以做到：1对多发消息，传递object。使用十分简洁。
使用时，在需要接收消息的界面注册一个通知名。然后在需要发消息的界面post这个通知名就可以了。可以在多个界面注册同一个通知名。这样就可以1对多发消息。
使用方法：
1：在app.js中引用notification.js
var notificationCenter = require('/utils/notification.js'); //这里请改为你的绝对路径
2：在app.js中添加：
onLaunch: function (){
this.notificationCenter = notificationCenter.center();
notificationCenter:null,
3: 接收通知的page.js中注册
var app = getApp();
onLoad:function(options){
app.notificationCenter.register("一个通知名称",this,"didReceviceAnyNotification");
didReceviceAnyNotification:function(name,content){
console.log("接收到了通知：",name, content);
4: 发出通知的page.js中
PageB.js 任意函数
var app = getApp();
anyFunction:function(){
app.notificationCenter.post("通知名称",{
//任意通知object
文件下载：
var notificationCenter = {
notificationCenter:{},
// 向通知中心注册一个监听者。
// name: 监听的通知名称
// observer: 监听者
// action: 监听者收通知时调用的方法名，
// func: 监听者收到通知时调用的函数，
// action func 2选1
register:function(name,observer,action,func){
if (!name || !observer)
if (!action && !func)
console.log("注册通知：",name,observer);
var center = this.notificationC
var objects = center[name];
if (!objects){
objects = [];
this.remove(name,observer);
objects.push({
observer:observer,
action:action,
center[name] =
// 从通知中心移除一个监听者
remove:function(name,observer){
if (!name || !observer)
var center = this.notificationC
var objects = center[name];
if (!objects){
for(idx = 0;idx&objects.idx++){
var obj = objects[idx];
if (obj.observer == observer){
if (object){
objects.splice(idx,1);
center[name] =
// 通过通知中心发出通知
// name: 通知名称
// notification: 通知内容
post:function(name,notification){
if (!name)
console.log("准备发出通知：",name,notification);
var center = this.notificationC
var objects = center[name];
if (!objects){
objects = [];
objects.forEach(function(object){
var observer = object.
var action = object.
var func = object.
if (observer && action){
func = observer[action];
func(notification);
console.log("完成向 ",objects.length," 个监听者发出通知：",name);
function center(){
return notificationC
module.exports.center =
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具微信小程序可以覆盖附件多少公里_百度知道
微信小程序可以覆盖附件多少公里
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
据官方说法是说距离用户五公里以内的商家可以被搜到，这是微信附近的小程序功能，这个功能可以为商家提供一个免费的广告位，给商家带来精准流量。
用户在编辑完一条图文消息之后，可以点击左侧“图文导航”下方的“+”，就会进入下一条图文消息的编辑页面。然后按照编辑单条图文消息的步骤编辑好消息内容即可。假如还需要加入更多条图文消息，可以继续点击左侧“图文导航”下方的“+”进行图文消息编辑。用户可以选择重点推广的图文消息作为主题封面，然后点击“保存并群发”按钮，这样就可以收到这个多条图文消息的内容了。多条图文消息涵盖的内容比较丰富，非常适合服务号或者不经常推送消息的用户，一次性可以编辑发送多条图文消息，进行综合活动。在群发消息的素材管理中，用户不仅可以向推送单条图文消息和多条图文消息，还可以推送多媒体消息，诸如音频和视屏等。
你说的是不是“附近的小程序”功能？大多数人的说法，是说距离用户五公里以内的商家可以被搜到。不过我有时候也能看到超过五公里外的商铺，所以应该也没个定数。这个功能感觉还是不错的，至少是个给力的免费广告位！而且，现在就一个广告位吧，还算是比较公平的~
附近小程序是覆盖半径5千米的哦。如果还有不清楚的，可以查第九程序上面的教程。很全面也很方便。
附近小程序距离是半径5km
其他3条回答
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}