小程序自定义侧滑删除组件

小程序提供了一个可移动视图容器movable-view；下面我来给大家介绍一个通过movable-view和movable-area组合编写的一个侧滑删除自定义组件。
先查看一下效果图：

下面看一下布局：
slide-slip.wxml

<movable-area class="_sideslip" style="width: {{width}}rpx; height: {{height}}rpx;"><movable-view direction="horizontal" class="_sideslip--movable" out-of-bounds="{{out}}" damping="20" x="{{x}}" style="width: {{width + slideWidth}}rpx; height: {{height}}rpx;" inertia bindchange="bindchange"><view class="slideslip-left" style="width: {{width}}rpx"><slot name="left"></slot></view><view class="slideslip-right" ><slot name="right"></slot></view></movable-view>
</movable-area>

movable-areaz主要用来限制可视区域大小；movable-view整个滑动的view大小，
侧滑左边的默认展示内容区域

    <view class="slideslip-left" style="width: {{width}}rpx"><slot name="left"></slot></view>

侧滑右边的默认隐藏区域

  <view class="slideslip-right" ><slot name="right"></slot></view>

slide-slip.js

Component({options: {multipleSlots: true},properties: {//  组件显示区域的宽度 (rpx)width: {type: Number,value: 750 // 750rpx 即整屏宽},//  组件显示区域的高度 (rpx),必填项height: {type: Number,value: 0},//  组件滑动显示区域的宽度 (rpx)slideWidth: {type: Number,value: 0},// 是否允许惯性越界out: {type: Boolean,value: true},},data: {x:0,},ready() {const info = wx.getSystemInfoSync()let rate = info.screenWidth / 750;let params = {}const query = wx.createSelectorQuery().in(this)query.select('.slideslip-right').boundingClientRect(res => {this.setData({slideWidth: res.width / rate});}).exec()},pageLifetimes: {// 组件所在页面的生命周期函数show: function () {this.setData({x: 0,});},},methods: {bindchange(e) {// if (this.data.x==0){//   this.setData({//     x: 1,//   });// }}}
})

这里主要是计算手机像素和小程序rpx的换算率，然后重新设置左边整个可移动的视图的大小

slide-slip.wxss

._sideslip {overflow: hidden;
}._sideslip--movable {display: flex;flex-direction: row;overflow: hidden;justify-content: flex-start;align-items: flex-start;box-sizing: border-box;
}.slideslip-left{flex-shrink: 0;
}.slideslip-right {display: flex;flex-shrink: 0;flex-direction: row;justify-content: flex-start;align-items: flex-start;box-sizing: border-box;
}

使用：

<slide-slip height="150" show="{{false}}"><view slot="left" class="sideslip-content"><view class="container" data-item="{{item}}" bindtap="onClickItem"><view class="title">{{item.title}}</view><view class="bottom_container"><view class="number">共{{item.count}}条留言</view><view class="number">{{item.look}}浏览</view><button hover-class="none" data-item="{{item}}" open-type="share" catchtap="onClicShare"><image class="share" src="{{'/images/icon_share.png'}}" data-item="{{item}}"></image></button></view></view></view><view slot="right" class="sideslip-oprate"><view class='sideslip-red' data-item="{{item}}" bindtap="onClickDelete">删除</view><view class='sideslip-blue' data-item="{{item}}" bindtap="onClickEdit">编辑</view></view>
</slide-slip>
<view class="line_10" wx:if="{{showLine}}"></view>

代码详细地址：https://github.com/fuxingkai/frankui-weapp

小程序自定义侧滑删除组件相关推荐

微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...
ithoughts怎么自定义样式_微信小程序自定义导航栏组件封装
相信很多小伙伴在开发微信小程序的时候都会有自定义顶部导航栏的需求,不够要说明的是小程序右上角的胶囊是不能自定义的哦,除了胶囊其他地方都是可以根据自己的项目而定了,在一次小程序开发中就需要对顶部进行自定 ...
微信小程序自定义modal弹窗组件
微信小程序开发中官方自带的wx.showModal,这个弹窗 API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用, ...
微信小程序自定义弹框组件
话不多说直接上代码目录 1.wxml 2.js 3.wxss 4.json 5.效果展示(具体内容可以自定义) 1.wxml <!--pages/components/confirmBox/c ...
小程序自定义导航栏组件
小程序代码片段 ** 效果图 ** 代码片段(点击可直接查看功能实现的全部代码) 小程序代码片段部分代码 wxml <view class="navBar {{navbarData. ...
微信小程序自定义card图文组件
//组件wxml<view class="home-party" style="padding-top:10px;"> <view>&l ...
微信小程序自定义组件/插件等解析
自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页 ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...

小程序自定义侧滑删除组件

小程序自定义侧滑删除组件相关推荐

最新文章

热门文章