uni-indexed-list.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. <template>
  2. <view id="list" ref="list" class="uni-indexed-list">
  3. <!-- #ifdef APP-NVUE -->
  4. <!-- 1144 -->
  5. <list
  6. class="uni-indexed-list__scroll"
  7. scrollable="true"
  8. show-scrollbar="false">
  9. <cell
  10. v-for="(list, idx) in lists"
  11. :key="idx"
  12. :ref="'uni-indexed-list-' + idx">
  13. <slot :scope-data="list" :loaded="loaded" />
  14. </cell>
  15. </list>
  16. <!-- #endif -->
  17. <!-- #ifndef APP-NVUE -->
  18. <scroll-view
  19. :scroll-into-view="scrollViewId"
  20. class="uni-indexed-list__scroll"
  21. scroll-y>
  22. <view
  23. v-for="(list, idx) in lists"
  24. :id="'uni-indexed-list-' + idx"
  25. :key="idx">
  26. <slot :scope-data="list" :loaded="loaded" />
  27. </view>
  28. </scroll-view>
  29. <!-- #endif -->
  30. <view
  31. :class="touchmove ? 'uni-indexed-list__menu--active' : ''"
  32. class="uni-indexed-list__menu"
  33. @touchstart="touchStart"
  34. @touchmove.stop.prevent="touchMove"
  35. @touchend="touchEnd">
  36. <view
  37. v-for="(list, key) in lists"
  38. :id="key"
  39. :key="key"
  40. :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''"
  41. class="uni-indexed-list__menu-item">
  42. {{ list.key }}
  43. </view>
  44. </view>
  45. <view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
  46. <text class="uni-indexed-list__alert">
  47. {{ lists[touchmoveIndex].key }}
  48. </text>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. // #ifdef APP-NVUE
  54. const dom = weex.requireModule('dom');
  55. // #endif
  56. // #ifdef APP-PLUS
  57. function throttle(func, delay) {
  58. var prev = Date.now();
  59. return function() {
  60. var context = this;
  61. var args = arguments;
  62. var now = Date.now();
  63. if (now - prev >= delay) {
  64. func.apply(context, args);
  65. prev = Date.now();
  66. }
  67. }
  68. }
  69. function touchMove(e) {
  70. let index = Number(e.target.id)
  71. if (!isNaN(index)) {
  72. if (this.touchmoveIndex === index) {
  73. return false
  74. }
  75. let item = this.lists[index]
  76. if (item) {
  77. // #ifndef APP-NVUE
  78. this.scrollViewId = 'uni-indexed-list-' + index
  79. this.touchmoveIndex = index
  80. // #endif
  81. // #ifdef APP-NVUE
  82. dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
  83. animated: false
  84. })
  85. this.touchmoveIndex = index
  86. // #endif
  87. }
  88. }
  89. }
  90. const throttleTouchMove = throttle(touchMove, 40)
  91. // #endif
  92. /**
  93. * IndexedList 索引列表
  94. * ------ 已经基于原版重新改造 ---------
  95. * @description 用于展示索引列表
  96. * @tutorial https://ext.dcloud.net.cn/plugin?id=375
  97. * @property {Object} options 索引列表需要的数据对象
  98. * @example <uni-indexed-list options=""></uni-indexed-list>
  99. */
  100. export default {
  101. name: 'UniIndexedList',
  102. props: {
  103. options: {
  104. type: Array,
  105. default() {
  106. return []
  107. }
  108. }
  109. },
  110. data() {
  111. return {
  112. lists: [],
  113. winHeight: 0,
  114. itemHeight: 0,
  115. winOffsetY: 0,
  116. touchmove: false,
  117. touchmoveIndex: -1,
  118. scrollViewId: '',
  119. touchmoveTimeout: '',
  120. loaded: false
  121. }
  122. },
  123. watch: {
  124. options: {
  125. handler: function() {
  126. this.setList()
  127. },
  128. deep: true
  129. }
  130. },
  131. mounted() {
  132. setTimeout(() => {
  133. this.setList()
  134. }, 50)
  135. setTimeout(() => {
  136. this.loaded = true
  137. }, 300);
  138. },
  139. methods: {
  140. setList() {
  141. let index = 0;
  142. this.lists = []
  143. this.options.forEach((value, index) => {
  144. if (value.data.length === 0) {
  145. return
  146. }
  147. let indexBefore = index
  148. let items = value.data.map(item => {
  149. let obj = {}
  150. obj['key'] = value.letter
  151. obj['name'] = item
  152. obj['itemIndex'] = index
  153. index++
  154. obj.checked = item.checked ? item.checked : false
  155. return obj
  156. })
  157. this.lists.push({
  158. title: value.letter,
  159. key: value.letter,
  160. items: items,
  161. itemIndex: indexBefore
  162. })
  163. })
  164. },
  165. touchStart(e) {
  166. this.touchmove = true
  167. let index = Number(e.target.id)
  168. if (!isNaN(index)) {
  169. let item = this.lists[index]
  170. if (item) {
  171. this.scrollViewId = 'uni-indexed-list-' + index
  172. this.touchmoveIndex = index
  173. // #ifdef APP-NVUE
  174. dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
  175. animated: false
  176. })
  177. // #endif
  178. }
  179. }
  180. },
  181. touchMove(e) {
  182. // #ifndef APP-PLUS
  183. let index = Number(e.target.id)
  184. if (!isNaN(index)) {
  185. if (this.touchmoveIndex === index) {
  186. return false
  187. }
  188. let item = this.lists[index]
  189. if (item) {
  190. this.scrollViewId = 'uni-indexed-list-' + index
  191. this.touchmoveIndex = index
  192. }
  193. }
  194. // #endif
  195. // #ifdef APP-PLUS
  196. throttleTouchMove.call(this, e)
  197. // #endif
  198. },
  199. touchEnd(e) {
  200. this.touchmove = false
  201. this.touchmoveIndex = -1
  202. }
  203. }
  204. }
  205. </script>
  206. <style lang="scss" scoped>
  207. .uni-indexed-list {
  208. position: relative;
  209. left: 0;
  210. top: 0;
  211. right: 0;
  212. bottom: 0;
  213. width: 100%;
  214. height: 100%;
  215. /* #ifndef APP-NVUE */
  216. display: flex;
  217. /* #endif */
  218. flex-direction: row;
  219. }
  220. .uni-indexed-list__scroll {
  221. flex: 1;
  222. }
  223. .uni-indexed-list__menu {
  224. position: absolute;
  225. top: 0;
  226. right: 0;
  227. width: 24px;
  228. height: 100%;
  229. /* #ifndef APP-NVUE */
  230. display: flex;
  231. /* #endif */
  232. flex-direction: column;
  233. align-items: center;
  234. justify-content: center;
  235. will-change: background-color;
  236. transition: background-color ease-in 0.3s;
  237. }
  238. .uni-indexed-list__menu-item {
  239. width: 100%;
  240. /* #ifndef APP-NVUE */
  241. display: flex;
  242. /* #endif */
  243. align-items: center;
  244. justify-content: center;
  245. line-height: 20px;
  246. font-size: 12px;
  247. text-align: center;
  248. color: #666;
  249. }
  250. .uni-indexed-list__menu-text {
  251. }
  252. .uni-indexed-list__menu--active {
  253. background-color: rgb(239, 239, 239);
  254. }
  255. .uni-indexed-list__menu-text--active {
  256. color: #007aff;
  257. }
  258. .uni-indexed-list__alert-wrapper {
  259. position: absolute;
  260. left: 0;
  261. top: 0;
  262. right: 0;
  263. bottom: 0;
  264. /* #ifndef APP-NVUE */
  265. display: flex;
  266. /* #endif */
  267. flex-direction: row;
  268. align-items: center;
  269. justify-content: center;
  270. }
  271. .uni-indexed-list__alert {
  272. width: 80px;
  273. height: 80px;
  274. border-radius: 80px;
  275. text-align: center;
  276. line-height: 80px;
  277. font-size: 35px;
  278. color: #fff;
  279. background-color: rgba(0, 0, 0, 0.5);
  280. }
  281. </style>