在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加ASP二级域名转向的代码
May 17 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
js判断节假日实例代码
Dec 27 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 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/02/18 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
利用Python演示数型数据结构的教程
2015/04/03 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Django实现学员管理系统
2019/02/26 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
大学生学习自我评价
2014/01/13 职场文书
总裁助理岗位职责
2014/02/17 职场文书
实训报告范文大全
2014/11/04 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android