123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template>
- <view :style="{backgroundColor: background, height: height}">
- <swiper class="app-swiper" style="height: 100%">
- <swiper-item :style="{height: height}" class="app-swiper-item dir-top-nowrap" v-for="(item, itemIndex) in newData" :key="itemIndex">
- <view v-for="(rows, rowsIndex) in item" class="app-rows dir-left-nowrap" :key="rowsIndex">
- <view v-for="(columns, columnsIndex) in rows" :key="columnsIndex" class="app-item dir-top-nowrap cross-center" :style="{width: width}">
- <app-jump-button form :url="columns.link_url" :open_type="columns.open_type" arrangement="column">
- <image class="app-icon" :src="columns.icon_url" :lazy-load="true"></image>
- <text :style="{color: color}" class="app-text">{{columns.name}}</text>
- </app-jump-button>
- </view>
- </view>
- </swiper-item>
- </swiper>
- </view>
- </template>
- <script>
- export default {
- name: 'app-navigation-icon',
- data() {
- return {
- width: uni.upx2px(0)+ 'px',
- height: 0,
- }
- },
- props: {
- background: {
- type: String,
- default() {
- return '#ffffff';
- }
- },
- color: {
- type: String,
- default() {
- return '';
- }
- },
- columns: {
- type: Number,
- default() {
- return 3;
- }
- },
- rows: {
- type: Number,
- default() {
- return 4;
- }
- },
- scroll: {
- type: Boolean,
- default() {
- return false;
- }
- },
- navs: {
- type: Array,
- default() {
- return [
- ]
- }
- }
- },
- computed: {
- newData: function() {
- this.width = `${uni.upx2px(750/this.columns)}px`;
- let menus = [];
- let newMenus = [];
- let num = Number(this.columns)* this.rows;
- if (this.scroll === true) {
- for (let i = 0; i < Math.ceil(this.navs.length/num); i++) {
- menus.push(this.navs.slice(i*num, (i+1)*num));
- }
- for (let i = 0; i < menus.length;i++) {
- let arr = [];
- for (let j = 0; j < Math.ceil(menus[i].length/ Number(this.columns)); j++) {
- arr.push(menus[i].slice(j* Number(this.columns), (j+1)* Number(this.columns)));
- }
- newMenus.push(arr);
- }
- } else {
- if (this.rows === -1) {
- menus = [this.navs];
- } else {
- menus.push(this.navs.slice(0, num));
- }
- for (let i = 0; i < menus.length;i++) {
- let arr = [];
- for (let j = 0; j < Math.ceil(menus[i].length/ Number(this.columns)); j++) {
- arr.push(menus[i].slice(j* Number(this.columns), (j+1)* Number(this.columns)));
- }
- newMenus.push(arr);
- }
- }
- if (newMenus.length === 0 ) return newMenus;
- return newMenus;
- }
- },
- watch: {
- newData: {
- handler: function(newVal) {
- this.height = `${uni.upx2px(newVal[0].length * 156)}px`;
- },
- immediate: true
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .app-swiper-item {
- width: #{750rpx};
- }
- .app-rows {
- width: #{750rpx};
- margin-top: #{28rpx};
- margin-bottom: #{4rpx};
- }
- .app-icon {
- width: #{90rpx};
- height: #{90rpx};
- }
- .app-text {
- font-size: #{24rpx};
- color: #353535;
- height: #{24rpx};
- line-height: #{24rpx};
- text-align: center;
- margin-top: #{8rpx};
- word-break: break-all;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 1;
- overflow: hidden;
- }
- .app-swiper {
- width: 100%;
- height: 100% !important;
- }
- </style>
|