小程序学习笔记 | 如何实现左滑删除效果？

按：这是我的第二篇小程序学习笔记，感兴趣的朋友可以往下看，不感兴趣的朋友可以关闭了。

实现的效果

在小程序中实现一个类似微信聊天窗口左滑删除的效果，最终效果如下：

实现这个效果，需要用到一个组件 slide-view，这个组件不属于原生组件（标签），它有另外一个名称——自定义组件。相比原生组件，自定义组件使用起来稍显麻烦。

开始前的准备

•安装 Node.js^[1]

这里我也没法解释 Node.js 具体是什么（因为我也还没学过），只知道 Node.js 集成了包管理工具 npm，后面在命令行工具 cmd 中安装小程序自定义组件时，需要用到 npm。

实现过程

由于我没有 Mac 电脑，以下操作仅对 Windows 系统而言。

弄清小程序项目存放的根目录

以我为例，我将小程序项目存放在 D 盘，具体路径为 D:\miniprogram\weixinminiprogram ，在这个路径下边，可以看到小程序的页面文件夹 pages、存放各种媒体的文件夹 images 等等。

使用命令行工具进入根目录

使用 Win + R 打开「运行」窗口，输入 cmd，打开一个黑乎乎的窗口，这个窗口就是所谓的「命令行工具」。之所以要用到命令行，是为了安装（或者说下载）自定义组件 slide-view 的源代码，且需要将这些源代码存放到小程序根目录中。命令行默认的路径是 C 盘，但我将小程序项目放在了 D 盘，为了切换到 D 盘，在命令行中输入：cd\  并回车

接着输入 d:  并回车，此时就切换到了 D 盘 接着使用命令行进入小程序的根目录，输入：cd miniprogram  并回车

cd weixinminiprogram  回车

此时就进入了小程序的根目录D:\miniprogram\weixinminiprogram 。

npm 初始化

npm 初始化仍需要用到命令行工具，在处于小程序根目录的状态下，输入：npm init  

并回车，稍等一会，会出现提示语「Press ^C at any time to quit」， 接着连续按多次回车键，直至出现提示语「Is this OK」，再按一次回车键。这样就完成了 npm 的初始化，它会在小程序的根目录中生成一个 package.json 文件。

以上的命令行操作全过程，可以看我截取的一张图片：

安装自定义组件

在命令行中输入：npm install --save miniprogram-slide-view运行这个命令，就会从云端下载自定义组件 slide-view 的源码，小程序的根目录中会多出一个名为 node_modules 的文件夹。

构建 npm

回到微信开发者工具中，点击「工具」选项卡，选择「构建 npm」，这个操作会将小程序编译时需要的文件，从 node_modules 文件夹移动到 miniprogram_npm 文件夹中。 完成这个操作后，小程序根目录会新增一个 miniprogram_npm 文件夹。

声明对组件的引用

在小程序页面的 json 配置文件里，对应到我的项目就是 index.json 文件，使用 usingComponents 配置，添加对 slide-view 的引用，具体代码如下：

wxml 代码

声明引用后，就可以在 index.wxml 中使用组件 slide-view 了。使用 wxml 代码实现左滑删除效果之前，先画出它的线框图：

wxml 代码实现：

<slide-view class="slide" width="750rpx" height="100rpx" slideWidth="300rpx">
    <view class="left" slot="left">这是左边的内容</view>
    <view class="right" slot="right">
        <view class="read">已读</view>
        <view class="delete">删除</view>
    </view>
</slide-view>

其中 slideWidth 是右侧隐藏按钮的宽度，第二个单次 Width 的 W 需要大写。

wxss 样式

样式用到了 Flex 布局，不了解 Flex 布局的朋友，可以看看知乎上的这篇教程《30 分钟学会 Flex 布局^[2]》，可以说非常详细了。

.left{
    background-color: white;
    width: 750rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
}
.right{
    width: 750rpx;
    height: 100rpx;
    display: flex;
    line-height: 100rpx;
    text-align: center;
}
.read{
    width: 150rpx;
    background-color: gray;
    color: white;
}
.delete{
    width: 150rpx;
    background-color: red;
    color: white;
}

写在最后

本文的内容基本来自我正在学习的一个小程序课程，但之所以写这篇文章，是因为课程中略过了一些比较基础和细碎的内容。由于我是个弱鸡，在一开始使用命令行工具就遇到了问题，这些问题有：

• 如何将命令行从 C 盘切换到 D 盘？
• 使用使用 npm 命令？
• 小程序根目录到底是指哪个文件夹？

后来经过多次的 Google 搜索，我把这些问题都解决了，于是就写下了这篇文章，我会把它分发到多个平台，喜欢对想学小程序或未来学小程序的朋友有帮助。以上。

References

[1] Node.js: https://nodejs.org/en/download/

[2] 30 分钟学会 Flex 布局: https://zhuanlan.zhihu.com/p/25303493