图片的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并没有给出一个直接的方法用来设置右边图片的点击事件,所 ...
随机推荐
- 攻防世界 你知道php备份文件吗？
题目地址:https://adworld.xctf.org.cn/task/answer?type=web&number=3&grade=0&id=5064 php的备份有两种 ...
- ubuntu 安装 gd
最近装一套系统,提示没开启GD, 1.首先检查一下,是否安装 新建一个文件 <?php phpinfo(); ?> 如果安装了,会在页面显示 2.没安装当然没有了 这个安装也是根据php版 ...
- go语言下载及安装
go语言下载地址:https://studygolang.com/dl 在cmd输入go 如果显示这样,说明安装成功 go env -w GOPROXY=https://goproxy.cn,dire ...
- 【struts 报错】 No action config found for the specified url
1 type Exception report message org.apache.struts.chain.commands.InvalidPathException: No action con ...
- java 生成/解读 二维码
package com.rails.util; import com.swetake.util.Qrcode; import jp.sourceforge.qrcode.QRCodeDecoder; ...
- redis的使用1
学Linux已经将近一个月了,Linux中讲到的redis的使用,到现在还不回具体的使用在php中,今天周末,于是想把redis的使用搞懂. 网上的资料不算多,但还需要硬着头皮学.其中找到这样一篇关于 ...
- Nmap工具用法详解
Nmap Network Mapper 是一款开放源代码的网络探测和安全审核工具 1.介绍
- 兔子与兔子（字符串hash)
传送门 很久很久以前,森林里住着一群兔子. 有一天,兔子们想要研究自己的 DNA 序列. 我们首先选取一个好长好长的 DNA 序列(小兔子是外星生物,DNA 序列可能包含 26 个小写英文字母). 然 ...
- jQuery学习（三）
jQuery文档操作方法 1.内部追加内容 选择器追加到内容 append(content)在当前jQuery对象内部所包含的DOM对象的内部的最后追加content对应的内容,其中content可以 ...
- 转发-【分享】思科无线控制器HA模式升级
思科无线控制器HA模式下升级文档 当前使用版本:8.0.120.0 计划升级版本:8.2.151.0 其他工具: TFTP Server: 3CDaemon 远程登录:SecureCRT ...