图片的onload事件与better-scroll结合[ 当fastclick插件和better-scroll发生冲突导致点击事件失效时，可以给需要点击的元素加一个class="needsclick"]
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片的onload事件</title>
<style>
.figure-wrapper { width: 400px; margin: 50px auto; font-size: 0; border: 1px solid red; background: #eee; text-align: center; }
</style>
</head>
<body>
<div class="figure-wrapper">
<img onload="handleOnload()" width="100%"
src="http://p.qpic.cn/music_cover/Biax4WTSMic4N0bgPWDwUCs9vvcm0PTev0Uz7IicxbKI9ajTkOUsubp5g/600?n=1" alt="">
</div> </body>
<script>
function handleOnload() {
// ...Do something
var txt = "img onload";
var divNode = document.createElement("div");
divNode.style = "text-align: center";
divNode.innerHTML = txt;
document.body.append(divNode)
}
</script>
</html>
warm-up
<template>
<div ref="wrapper">
<slot></slot>
</div>
</template>
<script>
import BScroll from 'better-scroll' export default {
name: 'BaseScroll',
props: {
probeType: {
type: Number,
default: 1
},
click: {
type: Boolean,
default: true
},
listenScroll: {
type: Boolean,
default: false
},
data: {
type: Array,
default: null
},
pullup: {
type: Boolean,
default: false
},
beforeScroll: {
type: Boolean,
default: false
},
refreshDelay: {
type: Number,
default: 20
}
},
watch: {
data() {
setTimeout(() => {
this.refresh()
}, 20)
}
},
mounted() {
setTimeout(() => {
this._initScroll()
}, 20)
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, {})
console.log(this.scroll)
}
})
},
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return
}
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click
})
if (this.listenScroll) {
let me = this
this.scroll.on('scroll', (pos) => {
me.$emit('scroll', pos)
})
}
/* 这个啥意思 */
if (this.pullup) {
this.scroll.on('crollEnd', () => {
if (this.scroll.y <= this.scroll.maxScrollY + 50) {
this.$emit('scrollToEnd')
}
})
}
if (this.beforeScroll) {
this.scroll.on('beforeScrollStart', () => {
this.$emit('beforeScroll')
})
}
},
disable() {
this.scroll && this.scroll.disable()
},
enable() {
this.scroll() && this.scroll.enable()
},
refresh() {
this.scroll && this.scroll.refresh()
},
scrollTo() {
this.scroll && this.scrollTo.apply(this.scroll, arguments)
},
scrollToElement() {
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
}
}
</script>
<style lang="stylus" scoped> </style>
封装的better-scroll
<template>
<div class="recommend">
<scroll ref="scroll" :data="discList" class="recommend-content">
<div>
<div v-if="sliderData.length" class="slider-wrapper">
<slider>
<div v-for="item in sliderData" :key="item.id">
<a :href="item.linkUrl">
<img @load="loadImage" :src="item.picUrl" class="needsclick">
</a>
</div>
</slider>
</div>
<div class="recommend-list">
<h1 class="list-title">热门歌单推荐</h1>
<ul>
<li v-for="item in discList" :key="item.dissid" class="item">
<div class="icon">
<img :src="item.imgurl" width="60" height="60">
</div>
<div class="text">
<h2 class="name" v-html="item.creator.name"></h2>
<p class="desc" v-html="item.dissname"></p>
</div>
</li>
</ul>
</div>
</div>
</scroll>
</div>
</template> <script>
import { getTopBanner, getDiscList } from 'api/recommend'
import { ERR_OK } from 'api/config'
import Slider from 'base/slider/Slider'
import Scroll from 'base/scroll/Scroll'
export default {
name: 'Recommend',
data() {
return {
sliderData: [],
discList: []
}
},
created() {
setTimeout(() => {
this._getTopBanner()
}, 1000)
this._getDiscList()
},
components: { Slider, Scroll },
methods: {
_getDiscList() {
getDiscList().then((res) => {
if (res.code === ERR_OK) {
this.discList = res.data.list
}
})
},
_getTopBanner() {
getTopBanner().then((res) => {
if (res.code === ERR_OK) {
this.sliderData = res.data.slider
}
})
},
loadImage() {
if (!this.checkLoaded) {
this.$refs.scroll.refresh()
this.checkLoaded = true
}
}
}
}
</script> <style lang="stylus" scoped>
@import '~common/stylus/variable'
.recommend
position fixed
width 100%
top 88px
bottom 0
.recommend-content
height 100%
overflow hidden
.slider-wrapper
position relative
width 100%
overflow hidden
.recommend-list
.list-title
height 65px
line-height 65px
text-align center
font-size $font-size-medium
color $color-theme
.item
display flex
box-sizing border-box
align-items center
padding 0 20px 20px 20px
.icon
flex 0 0 60px
width 60px
padding-right 20px
.text
display flex
flex-direction column
justify-content center
flex 1
line-height 20px
overflow hidden
font-size $font-size-medium
.name
margin-bottom 10px
color: $color-text
.desc
color: $color-text-d
</style>
第一张图片加载完后刷新better-scroll
图片的onload事件与better-scroll结合[ 当fastclick插件和better-scroll发生冲突导致点击事件失效时，可以给需要点击的元素加一个class="needsclick"]的更多相关文章
- 事件之onTouch方法的执行过程 及和 onClick执行发生冲突的解决办法
转载:http://blog.csdn.net/jiangwei0910410003/article/details/17504315#quote 博主推荐: 风萧兮兮易水寒,“天真”一去兮不复还.如 ...
- Android ImageView图片透明区域不响应点击事件，不规则图片透明区域响应点击事件
转载:http://blog.csdn.net/aminfo/article/details/7872681 经常会在项目中用到透明图片,不规则图片,特别是做游戏的时候,需要对图片的透明区域的点击事件 ...
- Android EditText中插入图片并响应点击事件
EditText中插入图片基本就是两种方法: ,通过Html.fromHtml(..)来实现 [mw_shl_code=java,true]eText.append(Html.fromHtml(&qu ...
- Android 响应webview中图片的点击事件
最近碰到个新需求需要点击webview中的图片进行放大显示. 整理了下思路,想到了下面的一个可行的方案. 方案思路, 1.在点击图片的时候调用本地的java方法并给出响应的图片地址 2.本地获得图片地 ...
- 给EditText的drawableRight属性的图片设置点击事件 分类： 学习笔记 android 2015-07-06 13:20 134人阅读 评论(0) 收藏
这个方法是通用的,不仅仅适用于EditText,也适用于TextView.AutoCompleteTextView等控件. Google官方API并没有给出一个直接的方法用来设置右边图片的点击事件,所 ...
- IOS 多个ImageView图片层叠透明区域点击事件穿透
经常用到多个透明图片层叠,但又需要获取不同图片的点击事件,本文实现图片透明区域穿透点击事件 实现人体各个部位点击 - (BOOL) pointInside:(CGPoint)point withEve ...
- Qt:添加点击事件的Label并显示图片
1.给label添加点击事件 Qt中原本的label是没有点击事件的,如果想添加点击事件的话,可以继承QLabel类并重载鼠标事件(比如mousePressedEvent),然后在鼠标事件中发送一个信 ...
- echarts对每个data[i]的图片添加点击事件
1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...
- 给EditText的drawableRight属性的图片设置点击事件
这个方法是通用的,不仅仅适用于EditText,也适用于TextView.AutoCompleteTextView等控件. Google官方API并没有给出一个直接的方法用来设置右边图片的点击事件,所 ...
随机推荐
- C#串口通信：MSComm控件使用详解
目 次MSComm控件两种处理通讯的方式CommPort属性RThreshold 属性CTSHolding 属性SThreshold 属性CDHolding 属性DSRHolding 属性Setti ...
- lintcode算法周竞赛
------------------------------------------------------------第七周:Follow up question 1,寻找峰值 寻找峰值 描述 笔记 ...
- Pandas 记录
过滤不为空的数据 df[df['PLANR']==''] 获取某列某行数据(某个单元格数据) df['MNG02'][0] 根据判断条件筛选数据 df[df['DAT00'] < temp_ti ...
- C++的new&delete
new的过程 new的过程:先分配memory,再调用ctor 我们常用的创建对象的方法有两种 Complex c(1,2); //栈 Complex *pc = new Complex(1,2); ...
- Jmeter在windows系统下的安装
一.工具描述 apache jmeter是100%的java桌面应用程序,它被设计用来加载被测试软件功能特性.度量被测试软件的性能.设计jmeter的初衷是测试web应用, 后来又扩充了其它的功能.j ...
- cf 76 div2
传送门 题意 t组样例 n个学生, x最多交换次数 a交换的第一个位置 b交换的第二个位置 最多是交换n-1次,不懂的话可以找个数列自己模拟一下: 然后其他的就是abs(a-b)+x;两个位置之间的距 ...
- js脚本中执行java后台代码
使用场景:关闭页面弹窗时执行sql语句. 其实js里执行sql语句有多种方式. 方式一:直接在js代码里调用sql语句,原则上不能使用,因为这将sql直接暴露在客户端,安全性极差. 方式二:在js里运 ...
- CDH 搭建 问题
1. 问题描述: java.sql.SQLException: Access denied for user 'xxx'@'xxx.xxx.xxx.xxx' (using password: YES ...
- from flyai.dataset import Dataset 报错
from flyai.dataset import Dataset 报错 No module name 'flyai' 先找到ide中使用的Python对应的pip的位置. windows用户 ...
- [经验] 如何将 Java 项目发布到云服务器上并可以访问
环境: 云服务器 Linux centos7.6 1: 安装 Tomcat (apache-tomcat-9.0.26.tar.gz) 下载压缩包 --> 通过SSH上传到云服务器 --> ...