123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297 |
- <template>
- <view id="list" ref="list" class="uni-indexed-list">
- <!-- #ifdef APP-NVUE -->
- <!-- 1144 -->
- <list
- class="uni-indexed-list__scroll"
- scrollable="true"
- show-scrollbar="false">
- <cell
- v-for="(list, idx) in lists"
- :key="idx"
- :ref="'uni-indexed-list-' + idx">
- <slot :scope-data="list" :loaded="loaded" />
- </cell>
- </list>
- <!-- #endif -->
-
- <!-- #ifndef APP-NVUE -->
- <scroll-view
- :scroll-into-view="scrollViewId"
- class="uni-indexed-list__scroll"
- scroll-y>
- <view
- v-for="(list, idx) in lists"
- :id="'uni-indexed-list-' + idx"
- :key="idx">
- <slot :scope-data="list" :loaded="loaded" />
- </view>
- </scroll-view>
- <!-- #endif -->
-
- <view
- :class="touchmove ? 'uni-indexed-list__menu--active' : ''"
- class="uni-indexed-list__menu"
- @touchstart="touchStart"
- @touchmove.stop.prevent="touchMove"
- @touchend="touchEnd">
- <view
- v-for="(list, key) in lists"
- :id="key"
- :key="key"
- :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''"
- class="uni-indexed-list__menu-item">
- {{ list.key }}
- </view>
- </view>
- <view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
- <text class="uni-indexed-list__alert">
- {{ lists[touchmoveIndex].key }}
- </text>
- </view>
- </view>
- </template>
- <script>
- // #ifdef APP-NVUE
- const dom = weex.requireModule('dom');
- // #endif
-
- // #ifdef APP-PLUS
- function throttle(func, delay) {
- var prev = Date.now();
- return function() {
- var context = this;
- var args = arguments;
- var now = Date.now();
- if (now - prev >= delay) {
- func.apply(context, args);
- prev = Date.now();
- }
- }
- }
- function touchMove(e) {
- let index = Number(e.target.id)
- if (!isNaN(index)) {
- if (this.touchmoveIndex === index) {
- return false
- }
- let item = this.lists[index]
- if (item) {
- // #ifndef APP-NVUE
- this.scrollViewId = 'uni-indexed-list-' + index
- this.touchmoveIndex = index
- // #endif
- // #ifdef APP-NVUE
- dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
- animated: false
- })
- this.touchmoveIndex = index
- // #endif
- }
- }
- }
- const throttleTouchMove = throttle(touchMove, 40)
- // #endif
- /**
- * IndexedList 索引列表
- * ------ 已经基于原版重新改造 ---------
- * @description 用于展示索引列表
- * @tutorial https://ext.dcloud.net.cn/plugin?id=375
- * @property {Object} options 索引列表需要的数据对象
- * @example <uni-indexed-list options=""></uni-indexed-list>
- */
- export default {
- name: 'UniIndexedList',
- props: {
- options: {
- type: Array,
- default() {
- return []
- }
- }
- },
- data() {
- return {
- lists: [],
- winHeight: 0,
- itemHeight: 0,
- winOffsetY: 0,
- touchmove: false,
- touchmoveIndex: -1,
- scrollViewId: '',
- touchmoveTimeout: '',
- loaded: false
- }
- },
- watch: {
- options: {
- handler: function() {
- this.setList()
- },
- deep: true
- }
- },
- mounted() {
- setTimeout(() => {
- this.setList()
- }, 50)
- setTimeout(() => {
- this.loaded = true
- }, 300);
- },
- methods: {
- setList() {
- let index = 0;
- this.lists = []
- this.options.forEach((value, index) => {
- if (value.data.length === 0) {
- return
- }
- let indexBefore = index
- let items = value.data.map(item => {
- let obj = {}
- obj['key'] = value.letter
- obj['name'] = item
- obj['itemIndex'] = index
- index++
- obj.checked = item.checked ? item.checked : false
- return obj
- })
- this.lists.push({
- title: value.letter,
- key: value.letter,
- items: items,
- itemIndex: indexBefore
- })
- })
- },
-
- touchStart(e) {
- this.touchmove = true
- let index = Number(e.target.id)
- if (!isNaN(index)) {
- let item = this.lists[index]
- if (item) {
- this.scrollViewId = 'uni-indexed-list-' + index
- this.touchmoveIndex = index
- // #ifdef APP-NVUE
- dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
- animated: false
- })
- // #endif
- }
- }
- },
- touchMove(e) {
- // #ifndef APP-PLUS
- let index = Number(e.target.id)
- if (!isNaN(index)) {
- if (this.touchmoveIndex === index) {
- return false
- }
- let item = this.lists[index]
- if (item) {
- this.scrollViewId = 'uni-indexed-list-' + index
- this.touchmoveIndex = index
- }
- }
- // #endif
- // #ifdef APP-PLUS
- throttleTouchMove.call(this, e)
- // #endif
- },
-
- touchEnd(e) {
- this.touchmove = false
- this.touchmoveIndex = -1
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .uni-indexed-list {
- position: relative;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- width: 100%;
- height: 100%;
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: row;
- }
- .uni-indexed-list__scroll {
- flex: 1;
- }
- .uni-indexed-list__menu {
- position: absolute;
- top: 0;
- right: 0;
- width: 24px;
- height: 100%;
-
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: column;
- align-items: center;
- justify-content: center;
- will-change: background-color;
- transition: background-color ease-in 0.3s;
- }
- .uni-indexed-list__menu-item {
- width: 100%;
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- align-items: center;
- justify-content: center;
- line-height: 20px;
- font-size: 12px;
- text-align: center;
- color: #666;
- }
- .uni-indexed-list__menu-text {
- }
- .uni-indexed-list__menu--active {
- background-color: rgb(239, 239, 239);
- }
- .uni-indexed-list__menu-text--active {
- color: #007aff;
- }
- .uni-indexed-list__alert-wrapper {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- /* #ifndef APP-NVUE */
- display: flex;
- /* #endif */
- flex-direction: row;
- align-items: center;
- justify-content: center;
- }
- .uni-indexed-list__alert {
- width: 80px;
- height: 80px;
- border-radius: 80px;
- text-align: center;
- line-height: 80px;
- font-size: 35px;
- color: #fff;
- background-color: rgba(0, 0, 0, 0.5);
- }
- </style>
|