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

@本来想直接使用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来加载案图片

<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组件 定义图标该图片和位置操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vant自定义二级菜单操作

    (1)组件解释: 本组件是为了解决二级联动的效果编写的,这里使用了省份和城市分开的效果,具体展示效果,可以参考下面. (2)组件代码: <template> <div> <button @click="showM">{{ value || "选择省份" }}</button> <button @click="showC">{{ value2 || "选择城市" }}&

  • Vant picker 多级联动操作

    官网地址:链接 官网文档可能不是很完善,但仔细看文档,方法,类型其实都讲到的. 度娘也没有找到,花了大半天爬坑试错. 搭配弹出层使用 <van-field readonly clickable placeholder="选择城市" :value="station" @click="showPicker = true" /> <van-popup v-model="showPicker" position=&q

  • vant 自定义 van-dropdown-item的用法

    我们还是这个item 我们要在里面加东西 这可咋整 <van-dropdown-item class='x3' title="选择地点"> <view class="choice"> <view class="choice_top"> 请选择 <view class="over"> x </view> </view> <view class=&quo

  • 解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题

    1.创建vue项目 2.使用vant组件 npm install vant --S 全局引用时在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 假如你引入之后发现页面的样式和组件都挂载了,但是console控制台会报错,说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题,重新下载一个最新的vant就可以了,现在是2.6.0版本 好,接下来继续 在需要使用下拉

  • 在vue中使用vant TreeSelect分类选择组件操作

    中文文档:TreeSelect 分类选择 效果展示: //先在你需要的页面中引入,第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分: <van-popup v-model="policeShow" position="top" :overlay="true"> <van

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

  • vant实现购物车功能

    做一些电商或者支付页面,肯定少不了购物车功能,一方面正反选,另一方面动态价格,全选之后再去加减商品数量(这里必须考虑 里面有很多蛋疼的问题)猛的一想,感觉思路很清晰,但是,真正动起手来就各种bug出来了,说实话 搞这个购物车,浪费我整整一下午的时间,当我回过头捋一遍,其实,半小时就能完事.就是因为全选的时候 我又去更改商品数量,然后调用算价格的方法导致浪费了太多时间,话不多少,还是先上图吧 先看看需求文档吧 代码格式不是很整齐 编辑器没有调整  凑合看吧 <template> <div

  • 微信小程序接入vant Weapp组件的详细步骤

    刚创建的项目的文件结构 首先在你项目的根目录下打开终端,输入npm init 对项目初始化 这时会生成pachage.json文件. 继续在终端运行以下命令 我这里用这个: npm i vant-weapp -S --production 运行完如图所示: 安装成功后 回到小程序开发工具 点击 工具 => 构建npm 运行完截图: 完成后在编辑器右边的详情把红框内的打勾上 使用组件 在你想使用组件库的的json文件内引入组件.比如你想在fundIncome页面内使用button组件. 效果: 上

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

    @本来想直接使用icon组件,使用阿里的图标库,可是怎么弄也不行,折腾一下午,最后决定使用最笨的办法,直接上代码 vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样 <div> <van-cell-group class="vanCellGroupClass"><!--../../assets/tou.png--> <!--<van-cell icon="" title="二级经营单位&quo

  • Vant中List组件immediate-check=false无效的解决

    目录 Vant中List组件immediate-check=false无效 问题场景 解决方法 Vant list组件使用的坑 总结 Vant中List组件immediate-check=false无效 使用vant中的List组件时,会有这样的场景 初始化时想自己触发列表查询,而不想触发 List 组件自带的 load 方法,这时可以设置 immediate-check=false,如下代码,但是这种方式会在下面的场景中出现问题 <van-list ref="vanlist"

  • 在vant中如何使用dialog弹窗

    在vant中如何使用dialog弹窗

    目录 如何使用dialog弹窗 1.官网示例 2.第一步引入vant中的dialog组件 3.vue页面中引入 4.使用 vant dialog组件使用 vant Dialog组件引入 template中使用 如何使用dialog弹窗 1.官网示例 因为这次是在手机上用的所以就用了vant组件 2.第一步引入vant中的dialog组件 官网介绍自行选择安装方式 3.vue页面中引入 <van-dialog v-model="show" title="标题"

  • vant中list的使用以及首次加载触发两次解决问题

    目录 vant中list使用及首次加载触发两次 首次加载触发两次解决问题 vant中list列表组件使用 1. 基础结构 3.methods定义方法 4.调用api渲染页面 vant中list使用及首次加载触发两次 以下是list的基本使用方法,主要原理就是当页面数据小于offset这个高度的时候,就会触发load,在load里面需要调用接口发送下一页的数据.所以发送完毕后需要将设置分页的属性加一,并将获取到的新值push进接收数据的数组里,而不是直接赋值,如果直接赋值那么数组里就只有新值,之前

  • vant中如何修改用户的头像

    vant中如何修改用户的头像

    目录 vant修改用户的头像 vant实现纯客户端用户头像上传预览 vant修改用户的头像 我们的项目中经常会遇到用户个人信息的修改,当然用的组件就是 vant 中的 van-uploader 组件, 但是这个组的是有一个回显功能的, 它的样式不太符合我们, 更改用户头像的场景 对比一下 van-uploader 的本来的样式是这样的 而我们需要修改用户头像的样式是这样的 我们的需求就是 上传完图像之后, 再次点击头像, 还可以再次上传一个新的头像, 这样的需求, van-uploader 中的

  • vue vant中picker组件的使用

    1.引入 import { Picker } from 'vant' 2.使用 components: { vanPicker: Picker, } 3.渲染 <van-picker show-toolbar :columns="columns" value-key="text" /> 4.将值push到columns //注意的点vant默认的是text,如果你需要修改需要value-key="你要定义的名字",否则不会渲染 thi

  • 华表CELL组件的应用

    南京天相软件有限公司    朱孝兵 本人所在单位于二○○二年购买了Cell组件,此期间使用Cell组件开发了不少项目,现将自己使用的一些感受及经验整理成文,抛砖引玉之作,期待得到大家指点. 安 装 篇 Cell组件是遵循ActiveX标准的控件,很容易安装到自己的开发环境中. 1.安装华表公司的Cell组件. 2.打开DELPHI,选择ComponentImport ActiveX Control-菜单. 3.在Import ActiveX窗体中选择Cell5.2 ActiveX Contro

  • Android开发应用中Broadcast Receiver组件详解

    Android开发应用中Broadcast Receiver组件详解

    BroadcastReceiver(广播接收器)是Android中的四大组件之一.下面就具体介绍一下Broadcast Receiver组件的用法. 下面是Android Doc中关于BroadcastReceiver的概述: ①广播接收器是一个专注于接收广播通知信息,并做出对应处理的组件.很多广播是源自于系统代码的──比如,通知时区改变.电池电量低.拍摄了一张照片或者用户改变了语言选项.应用程序也可以进行广播──比如说,通知其它应用程序一些数据下载完成并处于可用状态. ②应用程序可以拥有任意数

  • Flutter实现文本组件、图标及按钮组件的代码

    •文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认值 说明 data String   要显示的文本 maxLines int 0 文本要显示的最大行数 style TextStyle null 文本样式,可定义文本的字体大小.颜色.粗细等 textAlign TextAlign TextAlign.center 文本水平方向的对齐方式,取值有center.end.justify.left.right.start.val

随机推荐