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