<template>
<div class="details">
<com-nav-bar title="保险详情">
<i class="iconfont icon-xiangzuo" slot="left"></i>
</com-nav-bar>
<div class="details-scroll-wrapper" ref="scrollWrapper" :style="{bottom:bottom + 'px'}"> //动态添加样式
<div class="details-scroll-inner" :style="{paddingBottom:paddingBottom + 'px'}">
<div :class="[productInfo.tips?'cate':'cates']">
<span>{{productInfo.tips}}</span>
</div>
</div>
</div>
</div>
<div class="btn-bottom" ref="btnDetails"> //先算出这个的高度(因为这个高度不是固定的,所以需要让上面的div距离底部的就需要是动态计算出来)
<div class="btn-info">
<div style="display:flex;">
<div style="min-width:95px;margin-top:4px;">
<span class="agree" @click="choos"><i class="iconfont " :class="{'icon-weixuanzhong':!checked,'icon-xuanzhong1':checked}"></i>我已阅读:</span>
</div>
<div>
<span class="links" v-for="item in linksData" @click='goDetails(item.key,item.title,productInfo.id)'>《{{item.title}}》</span>
</div>
</div>
</div>
<div class="btn">
<button>{{productInfo.premium}}</button>
<button @click="goInsure(productInfo.code)">立即投保</button>
</div>
</div>
</div>
</template> <script>
import BScroll from 'better-scroll'
import urls from '@/api/urls' export default {
data() {
return {
paddingBottom: 0,
bottom:0,
}
},
created() {
this.id = this.$route.query.id
this.getInfo()
this.$store.dispatch("setpayData", {});
this.$store.dispatch('setorderData', {});
},
methods: {
// 获取产品详情
getInfo() {
this.$loadingStart()
this.$http(urls.productInfo, {
productCode: this.id,
})
.then(res => {
let that = this
this.$nextTick(() => {
this.tabTop = this.$refs.tabHeader.offsetTop
this.paddingBottom = this.$refs.scrollWrapper.clientHeight -
parseInt(getComputedStyle(this.$refs.sectionWrapper).paddingTop) -
this.$refs.tabHeader.clientHeight -
this.$refs.evaluate.clientHeight
let sall = document.querySelectorAll("div.introduce span.info img");
for(let i = 0, len = sall.length; i < len; i++) {
let interval = setInterval(function() {
if(sall[i].clientHeight != 0) {
that.scroll.refresh()
clearInterval(interval)
}
}, 100)
// sall[i].onload = function() {
// that.scroll.refresh()
// }
}
this.bottom=this.$refs.btnDetails.clientHeight //在这里获取到底部的高度,然后赋值到bottom
console.log(this.$refs.btnDetails.clientHeight);
}) })
.catch(err => {
this.$loadingEnd()
this.$errorHandler(err)
})
}
},
mounted() {
this.scroll = new BScroll(this.$refs.scrollWrapper, {
click: true,
probeType: 3,
pullUpLoad: {
threshold: 60,
},
})
this.scroll.on('scroll', pos => {
const {
y
} = pos const scrollY = -y
// 锚点实时切换
const evaluateTop =
this.$refs.evaluate.offsetTop -
this.$refs.tabHeader.clientHeight -
parseInt(getComputedStyle(this.$refs.sectionWrapper).paddingTop) const buyTop =
this.$refs.buy.offsetTop -
this.$refs.tabHeader.clientHeight -
parseInt(getComputedStyle(this.$refs.sectionWrapper).paddingTop)
this.showTop = scrollY > this.tabTop
if(scrollY >= evaluateTop) {
this.active = 2
} else if(scrollY >= buyTop) {
this.active = 1
} else {
this.active = 0
}
})
},
beforeDestroy() {
this.scroll.destroy();
}
}
</script> <style scoped lang="less" rel="stylesheet/less"> </style>

vue 移动端项目,动态控制div距离底部的距离的更多相关文章

  1. 从零开始搭建vue移动端项目到上线的步骤

    初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...

  2. 从零开始搭建vue移动端项目到上线

    先来看一波效果图 初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack mypro ...

  3. Vue移动端项目总结

    使用Vue项目写了一个移动端项目,然后又把项目硬生生的抽离了组件,一直忙着写RN项目没有时间总结心得,今天上午终于下定决心,写点总结. 1.position:absolute: 定位的时候不同手机的浏 ...

  4. Vue移动端项目模板

    一个集成移动端开发插件的Vue移动端模板包含1.css: 使用stylus开发css 集成reset样式文件 修改UI组件文件 统一样式处理(如主题色等)2.UI组件 使用热门的vant与mint-u ...

  5. vue 移动端项目总结(mint-ui)

    跨域解决方案 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require ...

  6. 17.vue移动端项目二

    FilmList.vue 电影列表 <template> <div class="mz-film-list"> <!-- 正在热映 https://m ...

  7. vue 移动端项目切换页面,页面置顶

    之前项目是pc端是使用router的方式实现置顶的 //main.js router.afterEach((to, from, next) => { window.scrollTo(0, 0) ...

  8. vue PC端项目中解决userinfo问题

    在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...

  9. 将Vue移动端项目打包成手机app---HBuilder

    将移动端页面打包成app 1.使用 HBuilder 直接编译打包 点击左上角 文件>打开目录>选择目录  选择用Webpack打包好的dist文件目录 由于我添加到项目了,所以会显示该项 ...

随机推荐

  1. PHP迭代器的内部执行过程

    下面我们来了解如何实现一个自定义的迭代器,然后再开始慢慢理解迭代器的内部工作原理.先来看一个官方的例子: class myIterator implements Iterator { private ...

  2. 路飞学城Python-Day80

    36-模板语法之继承 Django模版引擎中最强大也是最复杂的部分就是模版继承了.模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 blocks . ...

  3. 理解 Javascript 执行上下文和执行栈

    如果你是一名 JavaScript 开发者,或者想要成为一名 JavaScript 开发者,那么你必须知道 JavaScript 程序内部的执行机制.理解执行上下文和执行栈同样有助于理解其他的 Jav ...

  4. eclipse debug的时候提示debug Edit Source Lookup path

    原因可能是代码资源包未加载到debug的路径中,解决方法如下: Debug 视图下 ->在调试的线程上 右键单击 ->选择Edit Source Lookup Path ->选择Ad ...

  5. (0)资料官网【从零开始学Spring Boot】

    Spring Boot官网:http://projects.spring.io/spring-boot/ Eclipse官网:http://www.eclipse.org/ Maven官网:http: ...

  6. poj 2914&&hdu 3002 全局最小割Stoer-Wagner算法模板

    #include<stdio.h> #include<string.h> #include<iostream> #define inf 0x3fffffff #de ...

  7. Google Spanner (中文版)

    温馨提示:本论文由厦门大学计算机系林子雨翻译自英文论文,转载请注明出处,仅用于学习交流,请勿用于商业用途. [本文翻译的原始出处:厦门大学计算机系数据库实验室网站林子雨老师的云数据库技术资料专区htt ...

  8. 使用githug游戏提高git水平

  9. 组件的使用(三)AutoCompleteTextView的使用

    AutoCompleteTextView经常使用的属性: android:completionHint 下拉列表以下的说明性文字 android:completionThreshold 弹出下来列表的 ...

  10. SOA概念具体解释

    1.概述 1.1基本定义 SOA(Service-Oriented Architecture)既面向服务的体系结构,是一个组件模型.它将应用程序猿的不同功能可是(称为服务)通过定义良好的接口联系起来. ...