123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- <template>
- <view class="tab-box" id="tab-box">
- <view class="horizontal">
- <scroll-view :scroll-x="true" style="white-space: nowrap; " scroll-with-animation
- :scroll-left="slider.scrollLeft">
- <view v-for="(item, index) in tabList" :key="index" style="display: inline-block;">
- <block>
- <view class="flex-grow-1 flex-center">
- <view class="item" :class="{ active: activeIndex === index }" :id="'tab_'+index"
- @click="tabClick(index)">{{ item.name || item }}
- </view>
- </view>
- </block>
- </view>
- <view class="underline"
- :style="'transform:translateX(' + slider.left + 'px);width:' + slider.width + 'px'"></view>
- </scroll-view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'liuyuno-tabs',
- props: {
- tabData: {
- type: Array,
- default: () => []
- },
- defaultIndex: {
- type: Number,
- default: 0
- },
- underLinePadding: {
- type: Number,
- default: 10
- },
- },
- data() {
- return {
- tabList: [],
- tabListSlider: [],
- box: {
- left: 0,
- right: 0,
- top: 0,
- width: 0,
- height: 0,
- bottom: 0,
- },
- slider: {
- left: 0,
- width: 0,
- scrollLeft: 0
- },
- activeIndex: 0
- };
- },
- watch: {
- tabData(value) {
- this.tabList = value;
- setTimeout(() => {
- this.updateTabWidth();
- }, 100);
- },
- },
- mounted() {
- this.tabList = this.tabData;
- this.activeIndex = this.defaultIndex;
- this.$nextTick(() => {
- // #ifdef MP-ALIPAY
- var query = my.createSelectorQuery()
- query.select('.tab-box').boundingClientRect().exec((ret) => {
- // console.log(ret[0], "tab-box")
- let res=ret[0];
- this.box =res;
- this.updateTabWidth();
- })
- // #endif
- // #ifdef MP-WEIXIN
- var query = uni.createSelectorQuery().in(this);
- query.select('.tab-box').boundingClientRect((res) => {
- // console.log(res, "tab-box")
- this.box = res;
- this.updateTabWidth();
- }).exec();
- // #endif
- })
- },
- methods: {
- tabClick(index) {
- this.activeIndex = index;
- this.tabToIndex(index);
- this.$emit('tabClick', index);
- },
- tabToIndex(index) {
- let _slider = this.tabListSlider[index];
-
- this.slider = {
- left: _slider.left + (_slider.width / 2) - (_slider.width / 4),
- width: (_slider.width) / 2,
- scrollLeft: _slider.scrollLeft,
- // left: _slider.left + this.underLinePadding,
- // width: _slider.width - this.underLinePadding * 2,
- // scrollLeft: _slider.scrollLeft,
- }
- },
- updateTabWidth(index = 0) {
- let data = this.tabList;
- if (data.length == 0) return false;
- // console.log(data, "data")
- // #ifdef MP-ALIPAY
- var query = my.createSelectorQuery()
- query.select('#tab_' + index).boundingClientRect().exec((ret) => {
- // console.log(ret[0], "tab-box")
- let res=ret[0];
- let _prev_slider = this.tabListSlider[index - 1];
- this.tabListSlider[index] = {
- left: res.left - this.box.left,
- width: res.width,
- scrollLeft: res.left - this.box.left - (_prev_slider ? _prev_slider.width : 0),
- }
-
- if (this.activeIndex == index) {
- this.tabToIndex(this.activeIndex);
- }
- index++;
- if (data.length > index) {
- this.updateTabWidth(index);
- }
- })
- // #endif
- // #ifdef MP-WEIXIN
- var query = uni.createSelectorQuery().in(this);
- query.select('#tab_' + index).boundingClientRect((res) => {
- let _prev_slider = this.tabListSlider[index - 1];
- this.tabListSlider[index] = {
- left: res.left - this.box.left,
- width: res.width,
- scrollLeft: res.left - this.box.left - (_prev_slider ? _prev_slider.width : 0),
- }
- if (this.activeIndex == index) {
- this.tabToIndex(this.activeIndex);
- }
- index++;
- if (data.length > index) {
- this.updateTabWidth(index);
- }
- }).exec();
- // #endif
- }
- }
- }
- </script>
- <style lang="scss">
- .tab-box {
- width: 100%;
- color: rgba(0, 0, 0, 0.8);
- display: flex;
- height: 100rpx;
- background: #fff;
- font-size: 28upx;
- box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
- position: relative;
- z-index: 10;
- overflow: hidden;
- }
- .horizontal .active {
- color: #000;
- }
- .horizontal {
- width: 100%;
- }
- .wd33 {
- width: 33%;
- }
- .item {
- display: inline-block;
- text-align: center;
- padding: 0 30upx;
- height: 80rpx;
- line-height: 90upx;
- font-size: 32rpx;
- color: #A0A0A0;
- }
- .underline {
- height: 4upx;
- background-color: #000;
- border-radius: 3px;
- transition: .5s;
- }
- </style>
|