图片的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并没有给出一个直接的方法用来设置右边图片的点击事件,所 ...
随机推荐
- 6_12 油田（UVa572）<图的连通块DFS>
有一家石油公司负责探勘某块地底下的石油含量,这块地是矩行的,并且为了探勘的方便被切割为许多小块.然后使用仪器对每个小块去探勘.含有石油的小块称为一个pocket.假如两个pocket相连,则这两个po ...
- JAVA基础学习（5）之数组
5数组 5.1数组 5.1.1初识数组 // 输出大于平均数的所有数 Scanner in = new Scanner(System.in); int n; int[] a = new int[100 ...
- 吴裕雄 python 机器学习——模型选择参数优化随机搜索寻优RandomizedSearchCV模型
import scipy from sklearn.datasets import load_digits from sklearn.metrics import classification_rep ...
- 微软停止支持Windows 7 数百万台电脑将面临病毒等风险
导读 微软给出的公告称,从2020年开始停止支持Windows 7操作系统,这意味着该公司不会再向数百万台电脑发布任何软件更新,包括可以防止网络攻击的软件补丁. 微软给出的公告称,从2020年开始停止 ...
- jquery-1.10.2_d88366fd.js和jquery-3.1.0.min.js 在用touch事件时候， event.changedTouches[0]报错的问题。
1.animation动画:(注意如果这个动画是一开始就执行的,在pc端就要用px,在手机端用rem,如果在pc端展示页面,但用的是rem为单位,这时候动画一开始就执行,因为根字体大小还没准备好,动画 ...
- spring+mybatis报Cannot load JDBC driver
今天做用maven搭建ssm框架的例子,在测试的时候一直报ava.lang.ClassNotFoundException: oracle.jdbc.driver.OracleDriver 这个异常,找 ...
- oracle 提取文本中的数字
提取文本中的数字部分,并转换为数字 TO_NUMBER(regexp_substr(AGE,'[0-9.]+'))
- ASP.NET Core搭建多层网站架构【12-xUnit单元测试之集成测试】
2020/02/01, ASP.NET Core 3.1, VS2019, xunit 2.4.1, Microsoft.AspNetCore.TestHost 3.1.1 摘要:基于ASP.NET ...
- 拼接 字典序min
给定一个字符串类型的数组strs,找到一种拼接方式,使得把所有字符串拼起来之后形成的字符串具有最低的字典序. 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个 ...
- 【原】python3.6安装python-dev
[root@ci /usr/lib64/python3.6]# yum -y install python36-devel