123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194 |
- <template>
- <view class="u-page">
- <view class="u-demo-block">
- <text class="u-demo-block__title">基本案例</text>
- <view>
- <u-grid
- :border="false"
- @click="click"
- align="center"
- >
- <u-grid-item
- v-for="(baseListItem,baseListIndex) in baseList"
- :key="baseListIndex"
- >
- <u-icon
- :customStyle="{paddingTop:20+'rpx'}"
- :name="baseListItem.name"
- :size="22"
- ></u-icon>
- <text class="grid-text">{{baseListItem.title}}</text>
- </u-grid-item>
- </u-grid>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">显示边框</text>
- <view>
- <u-grid :border="true">
- <u-grid-item
- v-for="(listItem,listIndex) in list"
- :key="listIndex"
- customStyle="padding-top: 10px; padding-bottom: 10px"
- >
- <u-icon
- :customStyle="{paddingTop:20+'rpx'}"
- :name="listItem.name"
- :size="22"
- ></u-icon>
- <text class="grid-text">{{listItem.title}}</text>
- </u-grid-item>
- </u-grid>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">绑定点击事件&自定义列数</text>
- <view>
- <u-grid
- :border="false"
- col="4"
- >
- <u-grid-item
- v-for="(listItem,listIndex) in list"
- :key="listIndex"
- customStyle="padding-top: 10px; padding-bottom: 10px"
- >
- <u-icon
- :customStyle="{paddingTop:20+'rpx'}"
- :name="listItem.name"
- :size="22"
- ></u-icon>
- <text class="grid-text">{{listItem.title}}</text>
- </u-grid-item>
- </u-grid>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">可滑动</text>
- <view>
- <swiper
- :indicator-dots="true"
- class="swiper"
- >
- <swiper-item>
- <u-grid :border="true">
- <u-grid-item
- v-for="(item, index) in swiperList"
- :index="index"
- :key="index"
- >
- <u-icon
- :customStyle="{paddingTop:20+'rpx'}"
- :name="item"
- :size="22"
- ></u-icon>
- <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
- </u-grid-item>
- </u-grid>
- </swiper-item>
- <swiper-item>
- <u-grid :border="true">
- <u-grid-item
- v-for="(item, index) in swiperList"
- :index="index + 9"
- :key="index"
- >
- <u-icon
- :customStyle="{paddingTop:20+'rpx'}"
- :name="item"
- :size="22"
- ></u-icon>
- <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
- </u-grid-item>
- </u-grid>
- </swiper-item>
- <swiper-item>
- <u-grid :border="true">
- <u-grid-item
- v-for="(item, index) in swiperList"
- :index="index + 18"
- :key="index"
- >
- <u-icon
- :customStyle="{paddingTop:20+'rpx'}"
- :name="item"
- :size="22"
- ></u-icon>
- <text class="grid-text">{{ "宫格" + (index + 1) }}</text>
- </u-grid-item>
- </u-grid>
- </swiper-item>
- </swiper>
- </view>
- </view>
- <u-toast ref="uToast" />
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- baseList: [{
- name: 'photo',
- title: '图片'
- },
- {
- name: 'lock',
- title: '锁头'
- },
- // {
- // name: 'star',
- // title: '星星'
- // },
- ],
- list: [{
- name: 'photo',
- title: '图片'
- },
- {
- name: 'lock',
- title: '锁头'
- },
- {
- name: 'star',
- title: '星星'
- },
- {
- name: 'hourglass',
- title: '沙漏'
- },
- {
- name: 'home',
- title: '首页'
- },
- {
- name: 'volume',
- title: '音量'
- },
- ],
- swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
- }
- },
- methods: {
- click(name) {
- this.$refs.uToast.success(`点击了第${name}个`)
- }
- }
- }
- </script>
- <style lang="scss">
- .swiper {
- height: 220px;
- }
- .grid-text {
- font-size: 14px;
- color: #909399;
- padding: 10rpx 0 20rpx 0rpx;
- /* #ifndef APP-PLUS */
- box-sizing: border-box;
- /* #endif */
- }
- </style>
|