图片的onload事件与better-scroll结合[ 当fastclick插件和better-scroll发生冲突导致点击事件失效时，可以给需要点击的元素加一个class="needsclick"]
2024-09-02 17:36:14
<!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
最新文章
- ORACLE如何比较两个数据库的差异
- adb查询log命令
- Android Volley gives me 400 error
- jQueryUI 之控件们
- CSS 属性选择器(八)
- 3. Configure the Identity Service
- React组件生命周期-正确执行运行阶段的函数
- 新网注册域名如何转向其他(如花生壳)DNS（不会报错，已经转入成功）
- Android学习手记(2) Activity生命周期
- 【js】event(事件对象)详解
- Django--CRM--modelformset的用法
- redis hset hmset过期时间
- 【JVM.5】类文件结构
- Alpha冲刺随笔—：第一天
- C# 对数据库操作的帮助类SQLHelper.cs
- SQLServer 学习笔记之超详细基础SQL语句 Part 11
- 开发常见错误之 ： Detected both log4j-over-slf4j.jar AND slf4j-log4j12.jar
- html 绘制矩形轨迹，选中区域
- Spring由于web配置导致的spring配置文件找不到的问题的解决方案
- FPS计算New