当前位置:asp编程网>技术教程>MUI教程>  正文

uni-grid九宫格带图片带链接

2020-01-28 22:09:19   来源:www.aspbc.com   作者:wangsdong   浏览量:7357   收藏
直接上代码
<template>
<view>
<uni-grid :column="3" :show-border="false" @change="even">
    <uni-grid-item v-for="(item, index) in dataList" :index="index" :key="index">
       <view class="grid-item-box" >
<image :src="item.image" class="identify-head" mode="aspectFill" ></image>
            <text class="gemmologist-name">{{item.text}}</text>
        </view>
    </uni-grid-item>
    </uni-grid>
</view>
</template>
<script>
import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
export default {
    components: {
uniGrid,uniGridItem
},
data(){
return{
dataList:[
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/shu.png',text:'跳转到u1',url:"../../pages/index/u1"},  
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/lindang.png',text:'跳转到u2',url:"../../pages/index/u2"},  
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/xuehua.png',text:'跳转到u3',url:"../../pages/index/u3"},  {image:'https://img-cdn-qiniu.dcloud.net.cn/img/shu.png',text:'跳转到u1',url:"../../pages/index/u1"},  
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/lindang.png',text:'跳转到u2',url:"../../pages/index/u2"},  
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/xuehua.png',text:'跳转到u3',url:"../../pages/index/u3"},  {image:'https://img-cdn-qiniu.dcloud.net.cn/img/shu.png',text:'跳转到u1',url:"../../pages/index/u1"},  
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/lindang.png',text:'跳转到u2',url:"../../pages/index/u2"},  
    {image:'https://img-cdn-qiniu.dcloud.net.cn/img/xuehua.png',text:'跳转到u3',url:"../../pages/index/u3"}, 
]
}
},
methods:{
even(e){
let num = e.detail.index;
let url = this.dataList[num].url;
uni.navigateTo({
url: url,
});
}
}
}
</script>

1 【2】

关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网