u-swipe-action.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <template>
  2. <view class="">
  3. <movable-area class="u-swipe-action" :style="{ backgroundColor: bgColor }">
  4. <movable-view
  5. class="u-swipe-view"
  6. @change="change"
  7. @touchend="touchend"
  8. @touchstart="touchstart"
  9. direction="horizontal"
  10. :disabled="disabled"
  11. :x="moveX"
  12. :style="{
  13. width: movableViewWidth ? movableViewWidth : '100%'
  14. }"
  15. >
  16. <view
  17. class="u-swipe-content"
  18. @tap.stop="contentClick"
  19. >
  20. <slot></slot>
  21. </view>
  22. <view class="u-swipe-del" v-if="showBtn" @tap.stop="btnClick(index)" :style="[btnStyle(item.style)]" v-for="(item, index) in options" :key="index">
  23. <view class="u-btn-text">{{ item.text }}</view>
  24. </view>
  25. </movable-view>
  26. </movable-area>
  27. </view>
  28. </template>
  29. <script>
  30. /**
  31. * swipeAction 左滑单元格
  32. * @description 该组件一般用于左滑唤出操作菜单的场景,用的最多的是左滑删除操作。
  33. * @tutorial https://www.uviewui.com/components/swipeAction.html
  34. * @property {String} bg-color 整个组件背景颜色(默认#ffffff)
  35. * @property {Array} options 数组形式,可以配置背景颜色和文字
  36. * @property {String Number} index 标识符,点击时候用于区分点击了哪一个,用v-for循环时的index即可
  37. * @property {String Number} btn-width 按钮宽度,单位rpx(默认180)
  38. * @property {Boolean} disabled 是否禁止某个swipeAction滑动(默认false)
  39. * @property {Boolean} show 打开或者关闭某个组件(默认false)
  40. * @event {Function} click 点击组件时触发
  41. * @event {Function} close 组件触发关闭状态时
  42. * @event {Function} content-click 点击内容时触发
  43. * @event {Function} open 组件触发打开状态时
  44. * @example <u-swipe-action btn-text="收藏">...</u-swipe-action>
  45. */
  46. export default {
  47. name: 'u-swipe-action',
  48. props: {
  49. // index值,用于得知点击删除的是哪个按钮
  50. index: {
  51. type: [Number, String],
  52. default: ''
  53. },
  54. // 滑动按钮的宽度,单位为rpx
  55. btnWidth: {
  56. type: [String, Number],
  57. default: 180
  58. },
  59. // 是否禁止某个action滑动
  60. disabled: {
  61. type: Boolean,
  62. default: false
  63. },
  64. // 打开或者关闭组件
  65. show: {
  66. type: Boolean,
  67. default: false
  68. },
  69. // 组件背景颜色
  70. bgColor: {
  71. type: String,
  72. default: '#ffffff'
  73. },
  74. // 是否使手机发生短促震动,目前只在iOS的微信小程序有效(2020-05-06)
  75. vibrateShort: {
  76. type: Boolean,
  77. default: false
  78. },
  79. // 按钮操作参数
  80. options: {
  81. type: Array,
  82. default() {
  83. return [];
  84. }
  85. }
  86. },
  87. watch: {
  88. show: {
  89. immediate: true,
  90. handler(nVal, oVal) {
  91. if (nVal) {
  92. this.open();
  93. } else {
  94. this.close();
  95. }
  96. }
  97. }
  98. },
  99. data() {
  100. return {
  101. moveX: 0, // movable-view元素在x轴上需要移动的目标移动距离,用于展开或收起滑动的按钮
  102. scrollX: 0, // movable-view移动过程中产生的change事件中的x轴移动值
  103. status: false, // 滑动的状态,表示当前是展开还是关闭按钮的状态
  104. movableAreaWidth: 0, // 滑动区域
  105. elId: this.$u.guid(), // id,用于通知另外组件关闭时的识别
  106. showBtn: false, // 刚开始渲染视图时不显示右边的按钮,避免视图闪动
  107. };
  108. },
  109. computed: {
  110. movableViewWidth() {
  111. return this.movableAreaWidth + this.allBtnWidth + 'px';
  112. },
  113. innerBtnWidth() {
  114. return uni.upx2px(this.btnWidth);
  115. },
  116. allBtnWidth() {
  117. return uni.upx2px(this.btnWidth) * this.options.length;
  118. },
  119. btnStyle() {
  120. return style => {
  121. let css = {};
  122. style.width = this.btnWidth + 'rpx';
  123. return style;
  124. };
  125. }
  126. },
  127. mounted() {
  128. this.getActionRect();
  129. },
  130. methods: {
  131. // 点击按钮
  132. btnClick(index) {
  133. this.status = false;
  134. // this.index为点击的几个组件,index为点击某个组件的第几个按钮(options数组的索引)
  135. this.$emit('click', this.index, index);
  136. },
  137. // movable-view元素移动事件
  138. change(e) {
  139. this.scrollX = e.detail.x;
  140. },
  141. // 关闭按钮状态
  142. close() {
  143. this.moveX = 0;
  144. this.status = false;
  145. },
  146. // 打开按钮的状态
  147. open() {
  148. if (this.disabled) return;
  149. this.moveX = -this.allBtnWidth;
  150. this.status = true;
  151. },
  152. // 用户手指离开movable-view元素,停止触摸
  153. touchend() {
  154. this.moveX = this.scrollX;
  155. // 停止触摸时候,判断当前是展开还是关闭状态
  156. // 关闭状态
  157. // 这一步很重要,需要先给this.moveX一个变化的随机值,否则因为前后设置的为同一个值
  158. // props单向数据流的原因,导致movable-view元素不会发生变化,切记,详见文档:
  159. // https://uniapp.dcloud.io/use?id=%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98
  160. this.$nextTick(function() {
  161. if (this.status == false) {
  162. // 关闭状态左滑,产生的x轴位移为负值,也就是说滑动的距离大于按钮的四分之一宽度,自动展开按钮
  163. if (this.scrollX <= -this.allBtnWidth / 4) {
  164. this.moveX = -this.allBtnWidth; // 按钮宽度的负值,即为展开状态movable-view元素左滑的距离
  165. this.status = true; // 标志当前为展开状态
  166. this.emitOpenEvent();
  167. // 产生震动效果
  168. if (this.vibrateShort) uni.vibrateShort();
  169. } else {
  170. this.moveX = 0; // 如果距离没有按钮宽度的四分之一,自动收起
  171. this.status = false;
  172. this.emitCloseEvent();
  173. }
  174. } else {
  175. // 如果在打开的状态下,右滑动的距离X轴偏移超过按钮的四分之一(负值反过来的四分之三),自动收起按钮
  176. if (this.scrollX > (-this.allBtnWidth * 3) / 4) {
  177. this.moveX = 0;
  178. this.$nextTick(() => {
  179. this.moveX = 101;
  180. });
  181. this.status = false;
  182. this.emitCloseEvent();
  183. } else {
  184. this.moveX = -this.allBtnWidth;
  185. this.status = true;
  186. this.emitOpenEvent();
  187. }
  188. }
  189. });
  190. },
  191. emitOpenEvent() {
  192. this.$emit('open', this.index);
  193. },
  194. emitCloseEvent() {
  195. this.$emit('close', this.index);
  196. },
  197. // 开始触摸
  198. touchstart() {},
  199. getActionRect() {
  200. this.$uGetRect('.u-swipe-action').then(res => {
  201. this.movableAreaWidth = res.width;
  202. // 等视图更新完后,再显示右边的可滑动按钮,防止这些按钮会"闪一下"
  203. this.$nextTick(() => {
  204. this.showBtn = true;
  205. })
  206. });
  207. },
  208. // 点击内容触发事件
  209. contentClick() {
  210. // 点击内容时,如果当前为打开状态,收起组件
  211. if (this.status == true) {
  212. this.status = 'close';
  213. this.moveX = 0;
  214. }
  215. this.$emit('content-click', this.index);
  216. }
  217. }
  218. };
  219. </script>
  220. <style scoped lang="scss">
  221. @import "../../libs/css/style.components.scss";
  222. .u-swipe-action {
  223. width: auto;
  224. height: initial;
  225. position: relative;
  226. overflow: hidden;
  227. }
  228. .u-swipe-view {
  229. @include vue-flex;
  230. height: initial;
  231. position: relative;
  232. /* 这一句很关键,覆盖默认的绝对定位 */
  233. }
  234. .u-swipe-content {
  235. flex: 1;
  236. }
  237. .u-swipe-del {
  238. position: relative;
  239. font-size: 30rpx;
  240. color: #ffffff;
  241. }
  242. .u-btn-text {
  243. position: absolute;
  244. top: 50%;
  245. left: 50%;
  246. transform: translate(-50%, -50%);
  247. }
  248. </style>