在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 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 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
typecho插件编写教程(六):调用接口
2015/05/28 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
python制作一个桌面便签软件
2015/08/09 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
Python gevent协程切换实现详解
2020/09/14 Python
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
外科实习自我鉴定
2013/10/06 职场文书
个人求职简历的自我评价范文
2013/10/09 职场文书
毕业自荐书
2013/12/09 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers