在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 中调用 javascript 打开 Excel 表
Dec 21 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
js闭包的用途详解
Nov 09 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 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程序中防止盗链
2008/04/09 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
Jquery之美中不足小结
2011/02/16 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
浅谈angularjs中响应回车事件
2017/04/24 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
python 全局变量的import机制介绍
2017/09/07 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python用SSH连接到网络设备
2021/02/18 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
办公室内勤工作职责
2013/12/11 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
Linux中各个目录的作用与内容
2022/06/28 Servers