o2team / Wxapp Img Loader
适用于微信小程序的图片预加载组件
Stars: ✭ 1,049
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Wxapp Img Loader
Wechat Weapp Grouputils
微信小程序群应用,包括群通知、群接龙、群投票、群通讯录4大功能
Stars: ✭ 222 (-78.84%)
Mutual labels: wechat-app, wechat, wxapp
Python Weixin
微信(weixin|wechat) Python SDK 支持开放平台和公众平台 支持微信小程序云开发
Stars: ✭ 746 (-28.88%)
Mutual labels: wechat-app, wechat, wxapp
Weapp
🐧 微信小程序组件和功能封装,基于微信Component自定义组件开发
Stars: ✭ 235 (-77.6%)
Mutual labels: wechat-app, wechat, wxapp
Weixin Java Miniapp Demo
基于Spring Boot 和 WxJava 实现的微信小程序Java后端Demo
Stars: ✭ 779 (-25.74%)
Mutual labels: wechat-app, wechat, wxapp
Wx Charts
微信小程序图表charts组件,Charts for WeChat Mini Program
Stars: ✭ 4,633 (+341.66%)
Mutual labels: wechat-app, wechat
Wechat Miniprogram Examples
WeChat mini program examples. 微信小程序示例
Stars: ✭ 634 (-39.56%)
Mutual labels: wechat-app, wechat
Mpvue Animated Number
微信小程序 mpvue 数字更新滚动动画组件 / An animated number component for mpvue
Stars: ✭ 33 (-96.85%)
Mutual labels: wechat-app, wechat
Tom Vpr
how does voiceprint recognition work in wechat page
Stars: ✭ 37 (-96.47%)
Mutual labels: wechat-app, wechat
Scuplus Wechat
We川大小程序[scuplus] 使用wepy开发的完善的校园综合小程序, 40+页面,前后端开源,包括成绩、课表、失物招领、图书馆、新闻资讯等等常见校园场景功能
Stars: ✭ 545 (-48.05%)
Mutual labels: wechat-app, wechat
Alaweb
一套 Vue 代码,多端可用(H5、小程序、苹果App、安卓App、头条等)。系统含150+页面,200+组件(5端通用),30+元件(每个终端独立完成)
Stars: ✭ 837 (-20.21%)
Mutual labels: wechat-app, wxapp
Wechat App Music
微信小程序:音乐播放器 技术栈: redux + es7 +labrador
Stars: ✭ 384 (-63.39%)
Mutual labels: wechat-app, wechat
wxapp-img-loader
这是一个适用于微信小程序的原生图片预加载组件(若你使用的是 Taro,请移步至 taro 分支),已应用于京东购物等多个小程序中。使用步骤如下:
1、将 img-loader 目录拷贝到你的项目中
2、在页面的 WXML 文件中添加以下代码,将组件模板引入
<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>
3、在页面的 JS 文件中引入组件脚本
const ImgLoader = require('../../img-loader/img-loader.js')
4、实例化一个 ImgLoader 对象,将 this(当前 Page 对象) 传入,第二个参数可选,为默认的图片加载完成的回调方法
this.imgLoader = new ImgLoader(this)
5、调用 ImgLoader 实例的 load 方法进行图片加载,第一个参数为图片链接,第二个参数可选,为该张图片加载完成时的回调方法
this.imgLoader.load(imgUrlOriginal, (err, data) => {
console.log('图片加载完成', err, data.src, data.width, data.height)
})
注:图片加载完成的回调方法的第一个参数为错误信息(加载成功则为 null),第二个参数为图片信息(Object 类型,包括 src、width 及 height)。
使用方法可参考 demo 目录的事例,包括加载单张图片、及加载多张图片的场景,运行效果如下图所示:
- eof -
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].