123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350 |
- <template>
- <view class="app-navigation-two-icon" :style="{backgroundColor: background}">
- <view v-if="navType === 'fixed'" class="dir-top-nowrap nav-fixed u-border-box"
- :class="{'nav-fixed-text' : modeType === 'text'}">
- <view v-for="(navs, index1) in newNavs" :key="index1" class="dir-left-nowrap">
- <view v-for="(nav, index2) in navs" :key="index2"
- :style="{marginRight: index2 === navs.length - 1 ? 'auto' : '0',marginLeft: 'auto'}">
- <app-jump-button form :url="nav.link_url" :open_type="nav.open_type" arrangement="column"
- class="cross-top">
- <view class="nav-list dir-top-nowrap main-center cross-center u-border-box"
- :class="{'nav-list-text' : modeType === 'text'}">
- <image v-if="modeType === 'img'" class="nav-image" :src="nav.icon_url" lazy-load></image>
- <div v-if="nav.name" class="nav-name u-border-box" :style="{color: color}"
- :class="{'nav-name-text': modeType === 'text'}">
- {{nav.name.substring(0,columns > 5 ? 4: 5)}}
- </div>
- </view>
- </app-jump-button>
- </view>
- </view>
- </view>
- <block v-if="navType === 'alone'">
- <scroll-view scroll-x class="dir-left-nowrap" :style="{'max-height': modeType === 'img'? '192rpx': '100rpx'}">
- <view v-for="(nav, index) in navs" :key="index" :style="[formatB(index)]" class="box-list">
- <app-jump-button style="height: 100%" form :url="nav.link_url" :open_type="nav.open_type"
- arrangement="column"
- class="cross-top">
- <image v-if="modeType === 'img'" :src="nav.icon_url" :style="{height:'88rpx',width: '88rpx','margin-bottom': 'auto'}"
- lazy-load></image>
- <div v-if="nav.name" class="t-omit nav-name" :style="{color: color}"
- :class="{'nav-name-alone': modeType === 'text'}">
- {{nav.name.substring(0,aloneNum > 5 ? 4: 5)}}
- </div>
- </app-jump-button>
- </view>
- </scroll-view>
- </block>
- <block v-if="navType === 'multi'">
- <swiper @change="changeSwiper" :style="{height: multiswiper}">
- <swiper-item v-for="(navlist, index0) in muitiNavs" :key="index0" :item-id="index0">
- <view class="dir-top-nowrap nav-fixed" :class="'nav-swiper-' + tempIndex">
- <view v-for="(navs, index1) in navlist" :key="index1" class="dir-left-nowrap">
- <view v-for="(nav, index2) in navs" :key="index2"
- :style="{marginRight: index2 === navs.length - 1 ? 'auto' : '0',marginLeft: 'auto'}">
- <app-jump-button form :url="nav.link_url" :open_type="nav.open_type"
- arrangement="column"
- class="cross-top">
- <view class="nav-list dir-top-nowrap main-center cross-center"
- :class="{'nav-list-text' : modeType === 'text'}">
- <image v-if="modeType === 'img'" class="nav-image" :src="nav.icon_url"
- lazy-load></image>
- <div v-if="nav.name" class="nav-name" :style="{color: color}"
- :class="{'nav-name-text': modeType === 'text'}">
- {{nav.name.substring(0,columns > 5 ? 4: 5)}}
- </div>
- </view>
- </app-jump-button>
- </view>
- </view>
- </view>
- </swiper-item>
- </swiper>
- <!-- 指示点 -->
- <view class="main-center cross-center indicator u-border-box">
- <block v-if="swiperType === 'rectangle'">
- <view class="dir-left-nowrap">
- <view v-for="(i,index) in muitiNavs" :key="index" class="rectangletwo"
- :style="{backgroundColor: current === index ? swiperColor : swiperNoColor}">
- </view>
- </view>
- <!--<view :style="{width: `${muitiNavs.length * 44}rpx`}" class="rectangle">-->
- <!-- <view class="rectangle active"-->
- <!-- :style="{left: `${current * 44}rpx`,backgroundColor: swiperColor}"></view>-->
- <!--</view>-->
- </block>
- <block v-if="swiperType === 'circle'">
- <view class="dir-left-nowrap">
- <view v-for="(i,index) in muitiNavs" :key="index" class="circle"
- :style="{backgroundColor: current === index ? swiperColor : swiperNoColor}">
- </view>
- </view>
- </block>
- </view>
- </block>
- </view>
- </template>
- <script>
- export default {
- name: 'app-navigation-two-icon',
- props: {
- background: {
- type: String,
- default() {
- return '#ffffff';
- }
- },
- modeType: {
- type: String,
- default() {
- return 'img';
- }
- },
- color: {
- type: String,
- default() {
- return '#333333';
- }
- },
- //每行个数
- columns: {
- type: Number,
- default() {
- return 3;
- }
- },
- navs: {
- type: Array,
- default() {
- return []
- }
- },
- navType: String,
- aloneNum: Number, //一屏显示
- lineNum: Number, //一屏行数
- swiperType: String,
- swiperColor: String,
- swiperNoColor: String,
- tempIndex: Number,
- },
- data() {
- return {
- current: 0,
- multiswiper: '80px',
- defaultInfo: {
- imageHeight: 88,
- left: 32,
- limit: 30,
- }
- }
- },
- methods: {
- calcHeight: function () {
- setTimeout(() => {
- // #ifdef MP-ALIPAY || MP-BAIDU
- let query = uni.createSelectorQuery();
- // #endif
- // #ifndef MP-ALIPAY || MP-BAIDU
- let query = uni.createSelectorQuery().in(this);
- // #endif
- query.select(`.nav-swiper-${this.tempIndex}`).boundingClientRect(item => {
- if (item) {
- this.multiswiper = item.height + 'px';
- }
- }).exec();
- });
- },
- changeSwiper: function (e) {
- this.current = e.detail.current;
- },
- group: function (array, subGroupLength) {
- subGroupLength = parseInt(subGroupLength);
- let index = 0;
- let newArray = [];
- while (index < array.length) {
- newArray.push(array.slice(index, index += subGroupLength));
- }
- return newArray;
- },
- addNull: function () {
- let columns = this.columns;
- let length = this.navs.length;
- let addNum = length % columns === 0 ? 0 : columns - length % columns;
- return this.navs.concat(new Array(addNum).fill({
- 'url': '',
- 'openType': '',
- 'icon_url': '',
- 'name': '',
- }))
- }
- },
- created() {
- this.calcHeight();
- },
- beforeUpdate() {
- this.calcHeight();
- },
- computed: {
- newNavs() {
- let arr = this.addNull();
- return this.group(arr, this.columns)
- },
- muitiNavs() {
- let arr = this.addNull();
- arr = this.group(arr, this.columns);
- arr = this.group(arr, this.lineNum)
- return arr;
- },
- aloneWidth() {
- return `100rpx`;
- /*
- let aloneNum = Number(this.aloneNum);
- let width = 0;
- if (aloneNum < 5) {
- width = this.defaultInfo.imageHeight;
- } else {
- width = (750 - this.defaultInfo.left - (aloneNum - 1) * this.defaultInfo.limit) / (aloneNum * 2 - 1) * 2;
- }
- return `${uni.upx2px(width)}px`;
- */
- },
- formatB() {
- return (index) => {
- let aloneNum = Number(this.aloneNum);
- let extra = {width: this.aloneWidth};
- if (aloneNum < 5) {
- extra = Object.assign(extra, {
- marginLeft : `${uni.upx2px(750 - parseFloat(this.aloneWidth) * aloneNum) / (aloneNum + 1)}px`,
- })
- } else {
- extra = Object.assign(extra, {
- marginLeft: `${uni.upx2px((750 - parseFloat(this.aloneWidth) * aloneNum + parseFloat(this.aloneWidth) / 2) / aloneNum)}px`,
- })
- }
- if (index === this.navs.length - 1) extra = Object.assign(extra, {'margin-right': extra.marginLeft})
- return extra;
- }
- },
- },
- }
- </script>
- <style scoped lang="scss">
- .app-navigation-two-icon {
- ::-webkit-scrollbar {
- display: none;
- width: 0;
- height: 0;
- color: transparent;
- }
- .nav-fixed {
- padding: 0 0 #{24rpx};
- }
- .nav-fixed.nav-fixed-text {
- padding-bottom: #{32rpx - 36rpx + 32rpx};
- }
- .nav-list {
- padding-top: #{28rpx};
- width: #{100rpx};
- }
- .nav-list.nav-list-text {
- padding-top: 0;
- }
- .nav-image {
- height: #{88rpx};
- width: #{88rpx};
- display: block;
- margin-bottom: auto;
- }
- .nav-name {
- font-size: #{24rpx};
- color: #353535;
- padding-top: #{16rpx};
- padding-bottom: calc(#{32rpx} - #{28rpx});
- display: block;
- white-space: nowrap;
- line-height: 1;
- /*width: 100%;*/
- /*overflow: hidden;*/
- /*text-overflow: clip;*/
- text-align: center;
- }
- .nav-name.nav-name-text {
- padding-top: #{32rpx};
- padding-bottom: calc(#{36rpx} - #{32rpx});
- }
- .nav-name-alone {
- padding: calc(#{32rpx - 28rpx}) 0;
- }
- scroll-view {
- white-space: nowrap;
- padding: #{28rpx} 0;
- .box-list {
- display: inline-block;
- }
- image {
- width: 100%;
- display: block;
- }
- text {
- width: 100%;
- text-align: center;
- padding-top: #{12rpx};
- display: block;
- line-height: 1;
- padding-bottom: #{18rpx};
- font-size: #{12px};
- text-overflow: clip;
- }
- }
- .indicator {
- height: #{10rpx};
- margin-top: calc(#{16rpx - 24rpx});
- padding-bottom: #{12rpx};
- width: 100%;
- .rectangle {
- border-radius: #{6rpx};
- height: #{8rpx};
- background-color: #BCBCBC;
- position: relative;
- }
- .rectangle .active {
- position: absolute;
- top: 0;
- width: #{44rpx};
- }
- .rectangletwo {
- height: #{8rpx};
- margin: 0 #{2rpx};
- width: #{24rpx};
- border-radius: #{16rpx};
- }
- .circle {
- height: #{8rpx};
- margin: 0 #{5rpx};
- width: #{8rpx};
- border-radius: 50%;
- }
- }
- }
- </style>
|