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>
<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>
<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>