九宫格 图片 自定义 路径

javascript 复制代码
<image :src=" '../../static/img/' + item.urlname + '.png' "  class="u-w-82 u-h-82 u-p-t-36"></image>

使用场景:九宫格里含有多张图片

html

javascript 复制代码
<view class="u-p-b-46 u-p-x-35">
		<u-grid :border="false" col='5'  @click="clickbase" >
			<u-grid-item v-for="(item,index) in baseList" :key="index">
				<image :src=" '../../static/img/' + item.urlname + '.png' "  mode="" class="u-w-82 u-h-82 u-p-t-36"></image>
				<text class="u-m-t-15">{{item.title}}</text>
			</u-grid-item>
		</u-grid>
	</view>	

js

javascript 复制代码
	baseList: [{
						urlname: '1',
						title: '论文查重'
					},
					{
						urlname: '2',
						title: '代取快递'
					},
					{
						urlname: '3',
						title: '代办跑腿'
					},
					{
						urlname: '4',
						title: '返乡订票'
					},
					{
						urlname: '5',
						title: '旅游团建'
					},
					{
						urlname: '6',
						title: '在线课堂'
					},
					{
						urlname: '7',
						title: '在线点餐'
					},
					{
						urlname: '8',
						title: '校园小说'
					},
					{
						urlname: '9',
						title: '校园活动'
					},
					{
						urlname: '10',
						title: '校园二手'
					},
					{
						urlname: '11',
						title: '考研考公'
					},
					{
						urlname: '12',
						title: '雅思托福'
					},
					{
						urlname: '13',
						title: '周边兼职'
					},
					{
						urlname: '14',
						title: '社会百科'
					},
					{
						urlname: '15',
						title: '特惠电影'
					},
				],
相关推荐
xx24061 小时前
UniApp学习笔记
uni-app
七七小报5 小时前
uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
uni-app
lh_12545 小时前
uniapp 常用开发技巧与实战指南
uni-app
某公司摸鱼前端6 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_6 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
晨集6 小时前
Uni-App 多端电子合同开源项目介绍
java·spring boot·uni-app·电子合同
盛夏绽放10 小时前
uni-app中获取用户实时位置完整指南:解决权限报错问题
uni-app·notepad++
xixixin_10 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
一夜枫林16 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^17 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app