<!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"]的更多相关文章

  1. 事件之onTouch方法的执行过程 及和 onClick执行发生冲突的解决办法

    转载:http://blog.csdn.net/jiangwei0910410003/article/details/17504315#quote 博主推荐: 风萧兮兮易水寒,“天真”一去兮不复还.如 ...

  2. Android ImageView图片透明区域不响应点击事件,不规则图片透明区域响应点击事件

    转载:http://blog.csdn.net/aminfo/article/details/7872681 经常会在项目中用到透明图片,不规则图片,特别是做游戏的时候,需要对图片的透明区域的点击事件 ...

  3. Android EditText中插入图片并响应点击事件

    EditText中插入图片基本就是两种方法: ,通过Html.fromHtml(..)来实现 [mw_shl_code=java,true]eText.append(Html.fromHtml(&qu ...

  4. Android 响应webview中图片的点击事件

    最近碰到个新需求需要点击webview中的图片进行放大显示. 整理了下思路,想到了下面的一个可行的方案. 方案思路, 1.在点击图片的时候调用本地的java方法并给出响应的图片地址 2.本地获得图片地 ...

  5. 给EditText的drawableRight属性的图片设置点击事件 分类: 学习笔记 android 2015-07-06 13:20 134人阅读 评论(0) 收藏

    这个方法是通用的,不仅仅适用于EditText,也适用于TextView.AutoCompleteTextView等控件. Google官方API并没有给出一个直接的方法用来设置右边图片的点击事件,所 ...

  6. IOS 多个ImageView图片层叠透明区域点击事件穿透

    经常用到多个透明图片层叠,但又需要获取不同图片的点击事件,本文实现图片透明区域穿透点击事件 实现人体各个部位点击 - (BOOL) pointInside:(CGPoint)point withEve ...

  7. Qt:添加点击事件的Label并显示图片

    1.给label添加点击事件 Qt中原本的label是没有点击事件的,如果想添加点击事件的话,可以继承QLabel类并重载鼠标事件(比如mousePressedEvent),然后在鼠标事件中发送一个信 ...

  8. echarts对每个data[i]的图片添加点击事件

    1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...

  9. 给EditText的drawableRight属性的图片设置点击事件

    这个方法是通用的,不仅仅适用于EditText,也适用于TextView.AutoCompleteTextView等控件. Google官方API并没有给出一个直接的方法用来设置右边图片的点击事件,所 ...

随机推荐

  1. Plastic Sprayers Manufacturer -Plastic Spray Bottle Product Features, Nozzle Properties

    Nowadays, plastic spray bottles are widely used in the plastic packaging industry. What are the char ...

  2. 【PAT甲级】1084 Broken Keyboard (20 分)

    题意: 输入两行字符串,输出第一行有而第二行没有的字符(对大小写不敏感且全部以大写输出). AAAAAccepted code: #define HAVE_STRUCT_TIMESPEC #inclu ...

  3. 使用 yum 安装 MariaDB 与 MariaDB 的简单配置

    1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动MariaDB,两条命令都可以 systemctl sta ...

  4. 「CF815C」Karen and Supermarket

    传送门 Luogu 解题思路 树形背包. 设 \(f[i][j][0/1]\) 表示在以 \(i\) 为根的子树中选 \(j\) 件商品的最少花费. 边界条件: \(f[i][j][0] = \min ...

  5. 实现一个简易的Unity网络同步引擎——netgo

    实现一个简易的Unity网络同步引擎Netgo 目前GOLANG有大行其道的趋势,尤其是在网络编程方面.因为和c/c++比较起来,虽然GC占用了一部分机器性能,但是出错概率小了,开发效率大大提升,而且 ...

  6. 在C中测试函数运行时间

    #include <stdio.h> #include <time.h> #include <math.h> clock_t start, stop; //cloc ...

  7. Shiro入门基础

    Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能. Authentication:身份认证/登录,验证用户是不是拥有相应的身份: Authorization:授权,即 ...

  8. python numpy的var std cov研究

    var:表示方差, 即各项-均值的平方求和后再除以N , std:表示标准差,是var的平方根. cov:协方差 ,与var类似,但是除以(N-1) import numpy as np # 构建测试 ...

  9. 精简DOCKER环境

    docker system prune -a WARNING! This will remove:  - all stopped containers  - all networks not used ...

  10. UDLD(Unidirectional Link Detection)

    1.UDLD(单向链路检测协议)工作原理          为了在生成转发环路之前检测到单向链路,Cisco 设计并实施了 UDLD 协议.UDLD 是与第 1 层 (L1) 机制一起工作以确定链路物 ...