在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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
js中的闭包学习心得
Feb 06 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
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将session放入memcached的设置方法
2014/02/14 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
python 控制语句
2011/11/03 Python
Python常用库推荐
2016/12/04 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
详解python的argpare和click模块小结
2019/03/31 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
python实现图像外边界跟踪操作
2020/07/13 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
金智子午JAVA面试题
2015/09/04 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
求职者简历中的自我评价
2013/10/20 职场文书
毕业生面试求职信
2014/06/23 职场文书
公司户外活动总结
2014/07/04 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
安全承诺书格式范本
2015/04/28 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL