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

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

2020-01-28 22:09:19   来源:www.aspbc.com   作者:wangsdong   浏览量:116   收藏
直接上代码
<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>

<style>
.gemmologist-name{
display: block;
height: 45upx;
line-height: 45upx;
font-size: 25upx;

}
.grid-item-box{
text-align: center;
height: 165upx;
margin-top: 25upx;
}
.grid-item-box text{
height: 45upx;
}
.identify-head{
width: 80upx;
height: 80upx;
clear: both;
}
</style>


把上面代码保存为.vue文件,在hb中运行即可看到效果

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

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