12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <!-- DetailBackTop.vue -->
- <template>
- <view class="div detail-back-top ">
- <view class="div" v-if="!isTop">
- <text class="span iconfont" @click="goBackTop()"></text>
- </view>
- </view>
- </template>
- <script>
- export default {
- data () {
- return {
- isTop: false
- }
- },
- props: {
- target: {}
- },
- created () {
- var that = this
- this.target.addEventListener('scroll', event => {
- if (this.target.scrollTop || this.target.scrollTop >= 100) {
- that.isTop = false
- } else {
- that.isTop = true
- }
- })
- },
- mounted () {},
- methods: {
- /*
- * goBackTop: 回到顶部
- */
- goBackTop () {
- this.target.scrollTop = 0
- this.isTop = true
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .detail-back-top {
- position: fixed;
- bottom: 3rem;
- width: 2.5rem;
- height: 2.5rem;
- right: 0.5rem;
- .div {
- width: 100%;
- height: 100%;
- .img {
- width: 2.5rem;
- height: 2.5rem;
- }
- }
- }
- </style>
|