专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2018-08-16 作者:秩名
小程序原生组件image组件没有常用的功能,所以以下小编为大家介绍微信小程序之如何使用自定义组件封装原生image组件 ?
在小程序没还没推出自定义组件功能时,只能通过改变 Page 中的 data 来展示兜底的占位图,所以当时的处理方式十分蛋疼...
由于需要知道这个图片的数据路径,所以不得不在每个 image 上加上类似 data-img-path 的东西。
<view wx:for="{{ obj.arr }}" wx:key="imgSrc" wx:for-item="item" wx:for-index="itemIdx" > <image src="{{ item.imgSrc }}" binderror="onImageError" data-img-path="obj.arr[{{ itemIdx }}].imgSrc" /> </view> 复制代码
const DEFAULT_IMG = '/assets/your_default_img' Page({ data: { obj: { arr: [ { imgSrc: 'your_img1' }, { imgSrc: 'your_img2' }, ], }, }, onImageError ({ target: { dataset: { imgPath } }, }) { this.setData({ [imgPath]: DEFAULT_IMG, }) }, }) 复制代码
如果默认图片不同呢?例如球员、球队和 feed 的默认图片一般都是不同的。
那么一般只好再增加一个属性例如 data-img-type 来标识默认图的类型。
<!-- 球队图 --> <image ... data-img-type="team" /> <!-- 球员图 --> <image ... data-img-type="player" /> 复制代码
const DEFAULT_IMG_MAP = { feed: '/assets/default_feed', team: '/assets/default_team', player: '/assets/default_player', } Page({ data: { obj: { arr: [ { imgSrc: 'your_img1' }, { imgSrc: 'your_img2' }, ], }, }, onImageError ({ target: { dataset: { imgPath, imgType } }, }) { this.setData({ [imgPath]: DEFAULT_IMG_MAP[imgType], }) }, }) 复制代码
页面层级浅倒还好,如果跨模板了,那么模板就可能要用一个类似于 pathPrefix 的属性来传递模板数据的路径前缀。
<!-- 球员排行模板 pathPrefix: String playerList: Array ... --> <template name="srPlayerRank"> <view wx:for="{{ playerList }}" wx:key="imgSrc" wx:for-item="item" wx:for-index="itemIdx" > <image src="{{ item.imgSrc }}" binderror="onImageError" data-img-type="player" data-img-path="{{ pathPrefix }}.playerList[{{ itemIdx }}].imgSrc" /> </view> </template> 复制代码
最后在失败回调里调用 setData({ [path]: DEFAULT_IMG }) 重新设置图片地址。
原生写法一般要写4个文件:.json/.wxml/.js/.wxss
{ "component": true } 复制代码
<!-- 加载中的图片 --> <image hidden="{{ !isLoading }}" src="{{ errSrc }}" style="width: {{ width }}; height: {{ height }}; {{ styleStr }}" mode="{{ imgMode }}" /> <!-- 实际加载的图片 --> <image hidden="{{ isLoading }}" src="{{ imgSrc || src }}" mode="{{ imgMode }}" style="width: {{ width }}; height: {{ height }}; {{ styleStr }}" bindload="_onImageLoad" binderror="_onImageError" lazy-load="{{ true }}" /> 复制代码
const DEFAULT_IMG = '/assets/your_default_img' Component({ properties: { // 图片地址 src: String, // 图片加载中,以及加载失败后的默认地址 errSrc: { type: String, // 默认是球队图标 value: DEFAULT_IMG, }, width: { type: String, value: '48rpx', }, height: { type: String, value: '48rpx', }, // 样式字符串 styleStr: { type: String, value: '', }, // 图片裁剪、缩放的模式(详见文档) imgMode: { type: String, value: 'scaleToFill', }, }, data: { imgSrc: '', isLoading: true, }, methods: { // 加载图片出错 _onImageError (e) { this.setData({ imgSrc: this.data.errSrc, }) this.triggerEvent('onImageError', e) }, // 加载图片完毕 _onImageLoad (e) { this.setData({ isLoading: false }) this.triggerEvent('onImageLoad', e) }, }, }) 复制代码
布吉岛大家使用原生写法时有木有一些感觉不方便的地方:
所以以下是一个使用单文件组件封装原生 image 组件的例子。
<config> { "component": true } </config> <template lang="wxml"> <!-- 加载中的图片 --> <image hidden="{{ !isLoading }}" src="{{ errSrc }}" style="{{ imgStyleStr }}" mode="{{ imgMode }}" /> <!-- 实际加载的图片 --> <image hidden="{{ isLoading }}" src="{{ imgSrc || src }}" mode="{{ imgMode }}" style="{{ imgStyleStr }}" bindload="_onImageLoad" binderror="_onImageError" lazy-load="{{ true }}" /> </template> <script> /** * 图片组件,能够传递备用图片以防图片失效 * https://developers.weixin.qq.com/miniprogram/dev/component/image.html */ // 也可以设置为网络图片如: https://foo/bar.png const DEFAULT_IMG = '/assets/your_default_img' export default { props: { // 图片地址 src: String, // 图片加载中,以及加载失败后的默认地址 errSrc: { type: String, // 默认是球队图标 default: DEFAULT_IMG, }, width: { type: String, default: '48rpx', }, height: { type: String, default: '48rpx', }, // 样式字符串 styleStr: { type: String, default: '', }, // 图片裁剪、缩放的模式(详见文档) imgMode: { type: String, default: 'scaleToFill', }, }, data () { return { imgSrc: '', isLoading: true, } }, computed: { // 样式字符串 imgStyleStr () { return `width: ${this.width}; height: ${this.height}; ${this.styleStr}` }, }, methods: { // 加载图片出错 _onImageError (e) { this.imgSrc = this.errSrc this.$emit('onImageError', e) }, // 加载图片完毕 _onImageLoad (e) { this.isLoading = false this.$emit('onImageLoad', e) }, }, } </script> <style lang="scss"> </style> 复制代码
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
2024年怎样开加盟连锁店第七步(建立品牌知名度) 建立品牌知名度是成功创建一个加盟连锁品牌的关键步骤。一个强大的品...
2024年怎样开加盟连锁店第三步(开发一个详细的加盟手册) 加盟手册的重要性 加盟手册是加盟连锁品牌成功的基础组成部分...
在零售行业,线上线下一体化营销已经成为企业提升竞争力的关键策略。根据9的分析,2024年中国零售行业的数字化转型正在...
在数字化转型的浪潮中,线上线下推广方案已成为零售企业连接顾客、提升销售的关键策略。友数连锁,作为HiShop推出的新零...
星巴克的线上线下营销策略 星巴克作为全球知名的咖啡连锁品牌,一直在线上线下营销领域走在前列。以下是星巴克如何通...
在数字化时代,线上线下相结合的营销模式已成为零售行业的新常态,它通过整合线上电商平台和线下实体店铺的资源,为消...