一、学习使用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 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>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;
}2.3 上个示例，缺乏按钮操作区域的回弹效果
我们需要在滑动不超过一般的时候，让它可以自动弹回去，
然后在滑动超过一半的时候，让它可以自动的弹出来
- cd miniprogram
- npm init -y npm初始化
- npm install --save miniprogram-slide-view
- 微信开发者工具中，选择菜单、工具、构建npm
- 我们在小程序的json配置页面中使用usingComponents配置，添加对组件的引用
{
"usingComponents": {
"slide-view":"miniprogram-slide-view",
}
}我们就可以在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>组件源码
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.app.json中通过useExtendedLib这个配置字段添加对weiui的引用
"useExtendedLib": {
"weui": true
}{
"usingComponents": {
"mp-slideview": "weui-miniprogram/slideview/slideview",
}
}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;
}
