在vant 中使用cell组件 定义图标该图片和位置操作


Posted in Javascript onNovember 02, 2020

@本来想直接使用icon组件,使用阿里的图标库,可是怎么弄也不行,折腾一下午,最后决定使用最笨的办法,直接上代码

vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样

<div>
 <van-cell-group class="vanCellGroupClass"><!--../../assets/tou.png-->
 <!--<van-cell icon="" title="二级经营单位" value="未完成" size="large" label="二级经营单位" class="vanCellClass" />-->
 <van-cell value="未完成" label="描述信息">
  <template slot="title">
  <div class="c1"><img src="../../assets/img/tou.png" style="width: 3.6rem;"></div>
  <span class="custom-text">二级经营单位</span>
  </template>
 </van-cell>
 </van-cell-group>
 <br>
 </div>
//css样式,给cell部分从新定义了css样式
.van-cell__value {
 color: #e6210c;
 font-weight: bold;
 font-size: 1rem;
 overflow: hidden;
 text-align: right;
 line-height: 3.0625rem;
 flex: 1;
 position: relative;
 vertical-align: middle;
 }
 .van-cell__title{
 position: relative;
 flex: 2;
 }
 .c1{
 width: 0.625rem;
 height: 0.625rem;
 }
 .van-cell__label[data-v-5ff568b8] {
 font-size: 1rem;
 line-height: 1.1rem;
 padding-left: 4.3rem;
 }.custom-text{
 font-size: 1.2rem;
 margin-left: 4.3rem;
 }

主要百度上的方法都试过了,实在没有办法。

补充知识:vant Grid组件图片加载问题 无法加载本地图片解决方案

我们引入图片直接用官网给的icon来加载案图片

在vant 中使用cell组件 定义图标该图片和位置操作

<van-grid square>
 <van-grid-item 
  v-for="(item,index) in gridtextlist" 
  :key="index"
  :text="item.text"
  :icon="item.photo"
 />
 {{item}}
 </van-grid>

然后我们图片地址得用require包一下

gridtextlist:[
  {
  text:"女性专区",
  icon:"n",
  photo:require('../assets/cyimages/images/1indexjg1_05.png')
  },
  {
  text: "无醇",
  icon:"w",
  photo:require('../assets/cyimages/images/1indexjg2_05.png')
  },
  {
  text:"聚会畅想",
  icon:"j",
  photo:require('../assets/cyimages/images/1indexjg3_05.png')
  },
  {
  text:"关于爱情",
  icon:"g",
  photo:require('../assets/cyimages/images/1indexjg4_05.png')
  },
  {
  text:"火锅绝配",
  icon:"h",
  photo:require('../assets/cyimages/images/1indexjg5_05.png')
  },
  {
  text:"套餐推荐",
  icon:"template",
  photo:require('../assets/cyimages/images/1indexjg6_05.png')
  },
  {
  text:"送礼服务",
  icon:"scoped",
  photo:require('../assets/cyimages/images/1indexjg7_05.png')
  },
  {
  text:"侍酒专区",
  icon:"sh",
  photo:require('../assets/cyimages/images/1indexjg8_05.png')
  }, 
 ]

以上这篇在vant 中使用cell组件 定义图标该图片和位置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现点击消失的代码
Mar 03 Javascript
单元选择合并变色示例代码
May 26 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
初步了解javascript面向对象
Nov 09 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
vue实现登录拦截
Jun 29 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
Vant picker 多级联动操作
Nov 02 #Javascript
vue实现列表拖拽排序的功能
Nov 02 #Javascript
用vue写一个日历
Nov 02 #Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 #Javascript
vant自定义二级菜单操作
Nov 02 #Javascript
JavaScript动态生成表格的示例
Nov 02 #Javascript
JavaScript实现图片放大预览效果
Nov 02 #Javascript
You might like
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
js中replace的用法总结
2013/12/27 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
基于Python的OCR实现示例
2020/04/03 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
小学教师岗位职责
2015/04/02 职场文书
信息技术国培研修日志
2015/11/13 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
python爬取豆瓣电影TOP250数据
2021/05/23 Python
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
SQL Server中使用表变量和临时表
2022/05/20 SQL Server
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers