后浪云百度小程序教程：anchor-img 标签图片

2022-2-12

anchor-img 标签图片
- 属性说明
  - list 标签数组有效值
- 示例
  - 代码示例

anchor-img 标签图片

解释：标签图片组件，控制展开显示标签以及点击标签获取当前标签信息。可支持 aspectFit 和 widthFix 两种图片模式，支持自动计算标签方向，支持更改标签颜色和风格。

属性说明

属性名	类型	必填	默认值	说明
url	String	是		标签图片地址
originWidth	Number	是		图片原始宽度
originHeight	Number	是		图片原始高度
list	Array	是		标签数组。例：`[{type: ‘default’,ordinate: 100,abscissa: 200, position: ‘left’,text: ‘测试’}]`
mode	String	否	widthFix	标签图片模式。目前只支持 widthFix 和 aspectFit
showAnchor	Boolean	否	true	是否默认展开标签
maxFontCount	Number	否	6	允许显示的标签最大字数，多余省略。position 为空时用于计算左右方向
textColor	Color	否	#fff	标签文本颜色
tagColor	Color	否	rgba(0，0，0，0.6)	标签背景色
fontSize	Number	否	12	标签字号大小
roundSize	Number	否	10	圆点直径，与标签连线长度一致
needHandler	Boolean	否	true	是否需要控制器
handlerSize	Number	否	15	控制器图标宽 / 高
active	EventHandle	否		点击某个标签触发

list 标签数组有效值

属性名	类型	必填	默认值	说明
type	String	否	default	标签的风格类型，默认为不带商品图标，值为 primary 时带商品图标
abscissa	Number	是	0	标签相对于原图的位置横坐标
ordinate	Number	是	0	标签相对于原图的位置纵坐标
position	String	否		标签相对于圆点的方向。left：朝左；right：朝右。不传会根据 maxFontSize 及 fontSize 计算
text	String	是		标签文本

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
JSON

 
 
 
  
  
  <view class="container">
  
  
   <smt-anchor-img 
  
  
   mode="widthFix"
  
  
   url="{{img}}"
  
  
   origin-width="{{originWidth}}"
  
  
   origin-height="{{originHeight}}"
  
  
   max-font-count="6"
  
  
   list="{{list}}"
  
  
   bind:active="activeAnchorImg"
  
  
   ></smt-anchor-img>
  
  
  </view>

作者：后浪云

链接：https://www.idc.net/help/186021/

文章版权归作者所有，未经允许请勿转载。

THE END