|
滑动单元格组件原理是主题部分把按钮进行遮挡,按钮通过绝对定位,定位在最右边,通过监听触摸事件(touch),判断滑动的方向和计算滑动的距离以此来判定显示和隐藏按钮。显示和隐藏按钮是通过对主体部分进行css 的transform属性对主体元素进行移动,以达到显示和隐藏按钮的效果。
组件文件easy-swipe-cell.stml
- <template>
- <view class="easy-swipe-cell_container" data-id={itemId} @touchstart="start" @touchmove="move" @touchend="end">
- <view class="easy-swipe-cell_content" :style="itemId == touchIdNow?handleSwipe:'transform:translateX(0px)'">
- <text>{itemContent}</text>
- </view>
- <view class="easy-swipe-cell_btn" id="btn">
- <view class="easy-swipe-cell_btn-item" style="background-color: #ee0a24;" data-id={itemId} data-type='delete' @click="clickItem">
- <text class="easy-swipe-cell_btn-item-label">删除</text>
- </view>
- <view class="easy-swipe-cell_btn-item" style="background-color: #07c160;" data-id={itemId} data-type='read' @click="clickItem">
- <text class="easy-swipe-cell_btn-item-label">已读</text>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'easy-swipe-cell',
- props:{
- itemId:String,
- itemContent:String,
- touchIdNow:String
- },
- data() {
- return{
- startX:0, //触摸位置
- endX:0, //结束位置
- moveX: 0, //滑动时的位置
- disX: 0, //移动距离
- handleSwipe: '',//滑动时的效果,动态绑定
- touchId:''
- }
- },
- mounted (){
- },
- methods: {
- start(e){
- // console.log(JSON.stringify(e.detail)+'开始');
- this.data.startX = e.detail.x;
- this.data.touchId = e.currentTarget.dataset.id;
- this.fire('touch',this.data.touchId);
- },
- move(e){
- // console.log(JSON.stringify(e.detail)+'移动');
- let wd=document.getElementById('btn').offsetWidth;
- this.data.moveX = e.detail.x;
- this.data.disX = this.data.startX - this.data.moveX;
- console.log(this.data.disX);
- // 如果是向右滑动或者不滑动,不改变滑块的位置
- if(this.disX < 0 || this.disX == 0) {
- this.data.handleSwipe = "transform:translateX(0px)";
- // 大于0,表示左滑了,此时滑块开始滑动
- }else if (this.disX > 0) {
- //具体滑动距离我取的是 手指偏移距离*5。
- this.data.handleSwipe = "transform:translateX(-" + this.disX*5 + "px)";
- // 最大也只能等于按钮宽度
- if (this.disX*5 >=wd) {
- this.handleSwipe = "transform:translateX(-" +wd+ "px)";
- }
- }
- this.fire('touch',this.data.touchId);
- },
- end(e){
- //console.log(JSON.stringify(e.detail)+'结束');
- let wd=document.getElementById('btn').offsetWidth;
- let endX = e.detail.x;
- this.disX = this.data.startX - endX;
- //如果距离小于按钮一半,强行回到起点
- if ((this.disX*5) < (wd/2)) {
- this.data.handleSwipe = "transform:translateX(0px)";
- }else{
- //大于一半 滑动到最大值
- this.data.handleSwipe = "transform:translateX(-"+wd+ "px)";
- }
- this.fire('touch',this.data.touchId);
- },
- clickItem(e){
- this.data.handleSwipe = "transform:translateX(0px)";
- this.fire('clickBtn',{type:e.currentTarget.dataset.type,id:e.currentTarget.dataset.id});
- }
- }
- }
- </script>
- <style>
- .easy-swipe-cell_content{
- justify-content: center;
- background-color: #ffffff;
- position: relative;
- width: 100%;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- z-index: 1000;
- transition: 0.6s;
- min-height: 50px;
- padding: 10px;
- }
- .easy-swipe-cell_btn{
- position: absolute;
- right: 0;
- top: 0;
- display: flex;
- flex-flow: row nowrap;
- height: 100%;
- z-index: 1;
- }
- .easy-swipe-cell_btn-item{
- height: 100%;
- justify-content: center;
-
- }
- .easy-swipe-cell_btn-item-label{
- color: #ffffff;
- font-size: 15px;
- padding: 0 20px;
- }
- </style>
复制代码 示例文件demo-easy-swipe-cell.stml
- <template>
- <scroll-view class="page">
- <safe-area></safe-area>
- <view v-for="(item,index) in list">
- <easy-swipe-cell
- :itemId="item.id"
- :itemContent="item.content"
- :touchIdNow="touchID"
- ontouch="getTouchID"
- onclickBtn="getClickTyeAndId"
- >
- </easy-swipe-cell>
- </view>
- </scroll-view>
- </template>
- <script>
- import '../../components/easy-swipe-cell.stml'
- export default {
- name: 'demo-easy-swipe-cell',
- apiready(){//like created
- },
- data() {
- return{
- list:[{
- id:'1',
- content:'关于开展什么活动的通知'
- },{
- id:'2',
- content:'这是一条新的系统通知'
- },{
- id:'3',
- content:'您有一条新的消息提醒,请及时查看'
- }],
- touchID:''
- }
- },
- methods: {
- getTouchID(e){
- console.log(JSON.stringify(e));
- this.data.touchID = e.detail;
- },
- getClickTyeAndId(e){
- console.log(JSON.stringify(e));
- api.toast({
- msg:'当前点击的是'+e.detail.type+'按钮,记录ID是'+e.detail.id
- })
- }
- }
- }
- </script>
- <style>
- .page {
- height: 100%;
- }
- </style>
复制代码 示例展示
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|