| | |
| | | <template> |
| | | <scroll-view class="tag" scroll-x> |
| | | <view class="tag_list"> |
| | | <view v-for="item in TagList" |
| | | :key="item.id" |
| | | :class="{'tag_item': true, 'tagActive': item.id == activeId}" |
| | | @click="change(item)"> |
| | | <view v-for="(item, index) in TagList" |
| | | :key="index" |
| | | :class="{'tag_item': true, 'tagActive': index == activeId}" |
| | | @click="change(item, index)"> |
| | | <text>{{item.name}}</text> |
| | | <text v-if="isShow && item.num">({{item.num}})</text> |
| | | </view> |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | activeId: '' |
| | | activeId: 0 |
| | | }; |
| | | }, |
| | | methods: { |
| | | change(item) { |
| | | if (this.activeId !== item.id) { |
| | | this.activeId = item.id |
| | | change(item, index) { |
| | | if (this.activeId !== index) { |
| | | this.activeId = index |
| | | this.$emit('change', item.id) |
| | | } |
| | | } |
| | | }, |
| | | watch: { |
| | | TagList: { |
| | | immediate: true, |
| | | handler(news, old) { |
| | | let list = news |
| | | if (list && list.length !== 0) { |
| | | this.activeId = list[0].id |
| | | } |
| | | } |
| | | } |
| | | // TagList: { |
| | | // immediate: true, |
| | | // handler(news, old) { |
| | | // let list = news |
| | | // if (list && list.length !== 0) { |
| | | // this.activeId = list[0].id |
| | | // } |
| | | // } |
| | | // } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | text { |
| | | font-size: 26rpx; |
| | | font-weight: 400; |
| | | line-height: 26rpx; |
| | | color: #555555; |
| | | } |
| | | } |