微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 2.5 可移动容器及可移动区域，以及如何实现侧滑删除功能_小程序里能对消息进行滑动删除吗

一、学习使用moveable-view与movable-area组件

1.1 关于元素的定位

• static
  静态定位
  元素在页面流动的当前位置定位，这个时候它的top、left、right、bottom、z-index的设置都是无效的

• relative
  相对定位，
  相对定位的元素并没有脱离文档流，
  相对于元素本身它在页面流中的正常位置进行定位，这种定位不会影响其他元素
  movable-area，它的position样式默认是relative。

• absolute
  绝对定位，
  这个时候元素会被移出文档流，页面不会为它预留空间
  相对于static定位以外的第一个祖先元素进行定位
  movable-view，它的position样式默认就是absolute，

• fixed
  固定定位
  absolute是相对低于相邻的祖先元素进行定位，
  fixed相对于页面的顶级元素进行定位

• sticky
  粘性定位 ， https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
  粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

#one { 
	position: sticky; 
	top: 10px; 
}

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。
之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
1
2
3
4
5
6
7

---

1.2 movable-view、movable-area三种拖拽情况

第一、当两者的大小相等的时候，这个时候是无法移动的。
第二、当movable-view < movable-area的时候，
第三、当movable-view > movable-area,

---

二、如何实现侧滑删除单条消息的功能

2.1 如何实现动画

当animation属性设置为true的时候，动态改变属性x、y的值，这样动画就会产生了

2.2 如何实现一个左滑删除功能

2.2.1 将movable-area设置为等屏宽 750rpx

2.2.2 将movable-view的宽度设置为屏宽 + 左滑按钮区域宽度的和 ，左边的主要内容和右边的操作按钮都作为 movable-view 的子元素存在

2.2.3 将 movable-view 的direction属性设置为horizontal，

index.wxml

    <view class="page-section-title">左侧删除1</view>
    <view class="list_item">
        <movable-area style="width:750rpx;height:100rpx;">
            <movable-view style="width:1050rpx;height:100rpx;" direction="horizontal" class="max">
                <view class="left">这里是插入到组内容1</view>
                <view class="right">
                    <view class="read">已读</view>
                    <view class="delete">删除</view>
                </view>
            </movable-view>
        </movable-area>
    </view>
1
2
3
4
5
6
7
8
9
10
11
12

index.wxss

movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  width: 100rpx;
  background: #1AAD19;
  color: #fff;
}

movable-area {
  height: 400rpx;
  width: 400rpx;
  background-color: #ccc;
  overflow: hidden;
}

.max {
  width: 600rpx;
  height: 600rpx;
  background-color: blue;
}

.list_item {
  display: flex;
  border-bottom: 1px solid #DEDEDE;
} 
.slide{
  border-bottom:1px solid #DEDEDE;
}
.left {
  background-color: white;
  height: 100rpx;
  width: 750rpx;
  display: flex;
  flex-direction: row;
  color: grey;
  line-height: 100rpx;
  padding-left: 30rpx;
}
.right {
  height: 100;
  display: flex;
  direction: row;
  text-align: center;
  vertical-align: middle;
  line-height: 110rpx;
}
.read {
  background-color: #ccc;
  color: #fff;
  width: 150rpx;
}
.delete {
  background-color: red;
  color: #fff;
  width: 150rpx; 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

2.3 上个示例，缺乏按钮操作区域的回弹效果

我们需要在滑动不超过一般的时候，让它可以自动弹回去，
然后在滑动超过一半的时候，让它可以自动的弹出来

1. cd miniprogram
2. npm init -y npm初始化
3. npm install --save miniprogram-slide-view
4. 微信开发者工具中，选择菜单、工具、构建npm
5. 我们在小程序的json配置页面中使用usingComponents配置，添加对组件的引用

{  
	"usingComponents": { 	
		"slide-view":"miniprogram-slide-view",   
	} 
}
1
2
3
4
5

我们就可以在wxml中使用这个组件了
有自动回弹效果

    <!-- 左侧删除2 miniprogram-slide-view-->
<slide-view class="slide" width="750" height="100" slideWidth="300">
	<view class="left" slot="left">这里是插入到组内容2</view>
	<view class="right" slot="right">
	    <view class="read">已读</view>
	    <view class="delete">删除</view>
	</view>
</slide-view> 
1
2
3
4
5
6
7
8

组件源码

2.4微信团队 weiui组件库

weiui组件库，和多端统一开发库kbone组件库，是小程序当中唯一的两个扩展库

这两个扩展库可以通过采用扩展声明的方式，
直接在小程序里面使用，并且它还不占用小程序的代码包大小
小程序所有分包大小不能超过12M

weiui组件库可以采用npm安装的方式去使用，
它还可以通过扩展声明的方式进行使用，优先选择这种方式

npm安装

1.npm install --save weui-miniprogram --production
2.点击小程序开发工具的工具–构建npm
3.app.wxss @import ‘./miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss’;
4.在json文件中usingComponents引入组件

{
  "usingComponents": {
	"mp-slideview": "weui-miniprogram/slideview/slideview",
  }
}
1
2
3
4
5

扩展声明
1.app.json中通过useExtendedLib这个配置字段添加对weiui的引用

"useExtendedLib": {
	 "weui": true
 }
1
2
3

{
  "usingComponents": {
	"mp-slideview": "weui-miniprogram/slideview/slideview",
  }
}
1
2
3
4
5

2.微信开发者工具，构建npm

2.5 总结

在小程序中实现左滑删除的功能，
第一推荐还是weui组件库里面的slideview组件

2.6 相关问题

问题：在使用mp-slideview组件的时候，当在内部复用一个mp-cell组件时，主要的内容文字没有上下居中显示。在引用WeUI组件的时候，如何在组件的外部控制其内部样式表现呢？怎么控制示例中的文本让它居中显示呢？

答：所有个WeUI组件都有一个ext-class属性，这个属性是添加在组件内部结构上的一个class类样式，可以用于修改WeUI组件内部的样式
示例中内部mp-cell的样式名称为.weui-cell，我们只需要在wxss文件里面定义一个重写的一个样式，就可以实现重写内部组件的样式了

.slideViewClass .weui-cell{
  padding: 0;
}
1
2
3