traffic-eff-app/pages/tabbar/index/index.vue

<template>
  <view class="fui-wrap">
    <view class="search-content">
      <u-search placeholder="请输入关键字" v-model="keyword"></u-search>

    </view>

    <u-swiper :list="list" mode="none" :height="200" />
    <u-notice-bar :text="msg" :more-icon="false" color="#5af" bg-color="#d6e8f7"></u-notice-bar>
    <view style="width: 100%; margin-top: 20rpx">
      <u-grid
          :border="false"
          :col="3"
          @click="click"
      >
        <u-grid-item
            v-for="(baseListItem,baseListIndex) in baseList"
            :key="baseListIndex"
        >
          <view class="grid-item-icon" :style="{backgroundColor: baseListItem.bgColor}">
            <image :src="baseListItem.icon"></image>
          </view>
          <text class="grid-text">{{ baseListItem.title }}</text>
        </u-grid-item>
      </u-grid>
    </view>
    <u-gap height="10" bgColor="#bbb"></u-gap>
    <view class="u-page">
      <view class="u-page-title">
        <view class="line"></view>
        <view class="rectangle"></view>
        <view class="rectangle"></view>
        <view class="title-content">最新资讯</view>
        <view class="rectangle"></view>
        <view class="rectangle"></view>
        <view class="line"></view>
      </view>
      <u-list>
        <u-list-item
            v-for="(item, index) in indexList"
            :key="index"
        >
          <u-cell
              :title="`列表长度-${index + 1}`"
          >
            <u-avatar
                slot="icon"
                shape="square"
                size="35"
                :src="item.url"
                customStyle="margin: -3px 5px -3px 0"
            ></u-avatar>
          </u-cell>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: [
        '/static/images/swiper/title.png',
      ],
      msg: '加快建设交通强国大会将于2024年8月在南京召开',
      baseList: [
        {
          name: 'photo',
          icon: '/static/images/icons/meeting_info.svg',
          bgColor: '#6abff9',
          title: '大会介绍',
        },
        {
          name: 'lock',
          icon: '/static/images/icons/meeting_apply.svg',
          bgColor: '#f1b06c',
          title: '会议报名',
        },
        {
          name: 'star',
          icon: '/static/images/icons/meeting_point.svg',
          title: '会议指南',
          bgColor: '#ee794d',
        },
        {
          name: 'star',
          icon: '/static/images/icons/meeting_doc.svg',
          title: '交流材料汇编',
          bgColor: '#e66b66',
        },
        {
          name: 'star',
          icon: '/static/images/icons/meeting_traffic.svg',
          title: '交通指引',
          bgColor: '#82cf92',
        },
        {
          name: 'star',
          icon: '/static/images/icons/meeting_contact.svg',
          title: '联系我们',
          bgColor: '#4a75f6',
        },
      ],
      indexList: [],
      urls: [
        'https://cdn.uviewui.com/uview/album/1.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/3.jpg',
        'https://cdn.uviewui.com/uview/album/4.jpg',
        'https://cdn.uviewui.com/uview/album/5.jpg',
        'https://cdn.uviewui.com/uview/album/6.jpg',
        'https://cdn.uviewui.com/uview/album/7.jpg',
        'https://cdn.uviewui.com/uview/album/8.jpg',
        'https://cdn.uviewui.com/uview/album/9.jpg',
        'https://cdn.uviewui.com/uview/album/10.jpg',
      ]
    };
  },
  onLoad() {
    this.loadmore();
  },
  methods: {
    click() {

    },
    scrolltolower() {
      this.loadmore();
    },
    loadmore() {
      for (let i = 0; i < 30; i++) {
        this.indexList.push({
          url: this.urls[uni.$u.random(0, this.urls.length - 1)],
        });
      }
    },
  },
  onShareAppMessage() {
    return {
      title: 'First UI组件库',
    };
  },
};
</script>

<style lang="scss" src="./index.scss">


</style>