创新互联百度小程序教程：anchor-img标签图片
- anchor-img 标签图片
- 属性说明
- list 标签数组有效值
- 示例
- 代码示例
- 代码示例
- 属性说明
anchor-img 标签图片
解释：标签图片组件，控制展开显示标签以及点击标签获取当前标签信息。可支持 aspectFit 和 widthFix 两种图片模式，支持自动计算标签方向，支持更改标签颜色和风格。
成都创新互联10多年成都企业网站建设服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,成都企业网站建设及推广,对成都混凝土泵车等多个方面拥有丰富的网站制作经验的网站建设公司。
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
|
url |
String |
是 |
标签图片地址 |
|
|
originWidth |
Number |
是 |
图片原始宽度 |
|
|
originHeight |
Number |
是 |
图片原始高度 |
|
|
list |
Array |
是 |
标签数组。例： |
|
|
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
mode="widthFix"url="{{img}}"origin-width="{{originWidth}}"origin-height="{{originHeight}}"max-font-count="6"list="{{list}}"bind:active="activeAnchorImg">
当前标题：创新互联百度小程序教程：anchor-img标签图片
网站地址：http://www.zsjierui.cn/article/cdepisc.html