uni-swipe-action-item.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <template>
  2. <!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
  3. <!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
  4. <view class="uni-swipe">
  5. <view class="uni-swipe_box" :data-threshold="threshold" :data-disabled="disabled" :change:prop="swipe.sizeReady" :prop="btn" @touchstart="swipe.touchstart" @touchmove="swipe.touchmove" @touchend="swipe.touchend">
  6. <!-- 在微信小程序 app vue端 h5 使用wxs 实现-->
  7. <view class="uni-swipe_button-group button-group--left">
  8. <slot name="left">
  9. <view v-for="(item,index) in leftOptions" :data-button="btn" :key="index" :style="{
  10. backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  11. fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  12. }" class="uni-swipe_button button-hock" @touchstart="appTouchStart" @touchend="appTouchEnd($event,index,item,'left')"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
  13. </slot>
  14. </view>
  15. <slot></slot>
  16. <view class="uni-swipe_button-group button-group--right">
  17. <slot name="right">
  18. <view v-for="(item,index) in rightOptions" :data-button="btn" :key="index" :style="{
  19. backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  20. fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  21. }" class="uni-swipe_button button-hock" @touchstart="appTouchStart" @touchend="appTouchEnd($event,index,item,'right')"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
  22. </slot>
  23. </view>
  24. </view>
  25. </view>
  26. <!-- #endif -->
  27. <!-- app nvue端 使用 bindingx -->
  28. <!-- #ifdef APP-NVUE -->
  29. <view ref="selector-box--hock" class="uni-swipe" @horizontalpan="touchstart" @touchend="touchend">
  30. <view ref='selector-left-button--hock' class="uni-swipe_button-group button-group--left">
  31. <slot name="left">
  32. <view v-for="(item,index) in leftOptions" :data-button="btn" :key="index" :style="{
  33. backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  34. fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  35. }" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'left')"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
  36. </slot>
  37. </view>
  38. <view ref='selector-right-button--hock' class="uni-swipe_button-group button-group--right">
  39. <slot name="right">
  40. <view v-for="(item,index) in rightOptions" :data-button="btn" :key="index" :style="{
  41. backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  42. fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  43. }" class="uni-swipe_button button-hock" @click.stop="onClick(index,item,'right')"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
  44. </slot>
  45. </view>
  46. <view ref='selector-content--hock' class="uni-swipe_box">
  47. <slot></slot>
  48. </view>
  49. </view>
  50. <!-- #endif -->
  51. <!-- 其他平台使用 js ,长列表性能可能会有影响-->
  52. <!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
  53. <view class="uni-swipe">
  54. <view class="uni-swipe_box" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" :style="{transform:moveLeft}" :class="{ani:ani}">
  55. <view class="uni-swipe_button-group button-group--left">
  56. <slot name="left">
  57. <view v-for="(item,index) in leftOptions" :data-button="btn" :key="index" :style="{
  58. backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  59. fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  60. }" class="uni-swipe_button button-hock" @touchstart="appTouchStart" @touchend="appTouchEnd($event,index,item,'left')"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
  61. </slot>
  62. </view>
  63. <slot></slot>
  64. <view class="uni-swipe_button-group button-group--right">
  65. <slot name="right">
  66. <view v-for="(item,index) in rightOptions" :data-button="btn" :key="index" :style="{
  67. backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
  68. fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px'
  69. }" @touchstart="appTouchStart" @touchend="appTouchEnd($event,index,item,'right')" class="uni-swipe_button button-hock"><text class="uni-swipe_button-text" :style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{{ item.text }}</text></view>
  70. </slot>
  71. </view>
  72. </view>
  73. </view>
  74. <!-- #endif -->
  75. </template>
  76. <script src="./index.wxs" module="swipe" lang="wxs"></script>
  77. <script>
  78. // #ifdef APP-VUE|| MP-WEIXIN || H5
  79. import mpwxs from './mpwxs'
  80. // #endif
  81. // #ifdef APP-NVUE
  82. import bindingx from './bindingx.js'
  83. // #endif
  84. // #ifndef APP-PLUS|| MP-WEIXIN || H5
  85. import mixins from './mpother'
  86. // #endif
  87. /**
  88. * SwipeActionItem 滑动操作子组件
  89. * @description 通过滑动触发选项的容器
  90. * @tutorial https://ext.dcloud.net.cn/plugin?id=181
  91. * @property {Boolean} show = [left|right|none] 开启关闭组件,auto-close = false 时生效
  92. * @property {Boolean} disabled = [true|false] 是否禁止滑动
  93. * @property {Boolean} autoClose = [true|false] 滑动打开当前组件,是否关闭其他组件
  94. * @property {Number} threshold 滑动缺省值
  95. * @property {Array} leftOptions 左侧选项内容及样式
  96. * @property {Array} rgihtOptions 右侧选项内容及样式
  97. * @event {Function} click 点击选项按钮时触发事件,e = {content,index} ,content(点击内容)、index(下标)
  98. * @event {Function} change 组件打开或关闭时触发,left\right\none
  99. */
  100. export default {
  101. // #ifdef APP-VUE|| MP-WEIXIN||H5
  102. mixins: [mpwxs],
  103. // #endif
  104. // #ifdef APP-NVUE
  105. mixins: [bindingx],
  106. // #endif
  107. // #ifndef APP-PLUS|| MP-WEIXIN || H5
  108. mixins: [mixins],
  109. // #endif
  110. props: {
  111. // 控制开关
  112. show: {
  113. type: String,
  114. default: 'none'
  115. },
  116. // 禁用
  117. disabled: {
  118. type: Boolean,
  119. default: false
  120. },
  121. // 是否自动关闭
  122. autoClose: {
  123. type: Boolean,
  124. default: true
  125. },
  126. // 滑动缺省距离
  127. threshold: {
  128. type: Number,
  129. default: 20
  130. },
  131. // 左侧按钮内容
  132. leftOptions: {
  133. type: Array,
  134. default () {
  135. return []
  136. }
  137. },
  138. // 右侧按钮内容
  139. rightOptions: {
  140. type: Array,
  141. default () {
  142. return []
  143. }
  144. }
  145. },
  146. inject: ['swipeaction']
  147. }
  148. </script>
  149. <style scoped>
  150. .uni-swipe {
  151. position: relative;
  152. /* #ifndef APP-NVUE */
  153. overflow: hidden;
  154. /* #endif */
  155. }
  156. .uni-swipe_box {
  157. /* #ifndef APP-NVUE */
  158. display: flex;
  159. flex-shrink: 0;
  160. /* #endif */
  161. position: relative;
  162. }
  163. .uni-swipe_button-group {
  164. /* #ifndef APP-NVUE */
  165. box-sizing: border-box;
  166. display: flex;
  167. /* #endif */
  168. flex-direction: row;
  169. position: absolute;
  170. top: 0;
  171. bottom: 0;
  172. }
  173. .button-group--left {
  174. left: 0;
  175. transform: translateX(-100%);
  176. }
  177. .button-group--right {
  178. right: 0;
  179. transform: translateX(100%);
  180. }
  181. .uni-swipe_button {
  182. /* #ifdef APP-NVUE */
  183. flex: 1;
  184. /* #endif */
  185. /* #ifndef APP-NVUE */
  186. display: flex;
  187. /* #endif */
  188. flex-direction: row;
  189. justify-content: center;
  190. align-items: center;
  191. padding: 0 20px;
  192. }
  193. .uni-swipe_button-text {
  194. /* #ifndef APP-NVUE */
  195. flex-shrink: 0;
  196. /* #endif */
  197. font-size: 14px;
  198. }
  199. .ani {
  200. transition-property: transform;
  201. transition-duration: 0.3s;
  202. transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  203. }
  204. /* #ifdef MP-ALIPAY */
  205. .movable-area {
  206. /* width: 100%; */
  207. height: 45px;
  208. }
  209. .movable-view {
  210. display: flex;
  211. /* justify-content: center; */
  212. position: relative;
  213. flex: 1;
  214. height: 45px;
  215. z-index: 2;
  216. }
  217. .movable-view-button {
  218. display: flex;
  219. flex-shrink: 0;
  220. flex-direction: row;
  221. height: 100%;
  222. background: #C0C0C0;
  223. }
  224. /* .transition {
  225. transition: all 0.3s;
  226. } */
  227. .movable-view-box {
  228. flex-shrink: 0;
  229. height: 100%;
  230. background-color: #fff;
  231. }
  232. /* #endif */
  233. </style>