uni-swipe-action-item.vue 9.1 KB

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