基于手机端项目实战总结而来

手机端或者说移动端，在具体的项目开发中遇到了比较好的实现方法或者思路，随手记录下来

1、业务场景

最近做的一个前端项目，页面初始化时，页面打开比较慢，用户体验度不好。经过前后端分析确认，造成页面打开慢的原因有2个：

由于请求的数据量比较大，后端接口返回数据慢；
2.由于数据量大，后端返给前端的大量数据使得前端页面渲染比较慢。；

2、前端优化思路

可以将后端返回的大量数据，使用类似分页式的功能，每次分页渲染。

3、具体实现思路

页面初始化时，获取后端返回的数据（返回的数据是数组形式的），将数据等分成N份，用户每次上拉到底部时，渲染下一页的数据。即：用户上拉滑动时，会触动scroll事件，当【文档高度(scrollHight)小于滚动条高度(scrollTop)加页面可视高度(clientHeight)】时，触发滚动事件(scroll事件)，页面渲染下一页的数据。注意：scrollHight是整个页面文档的高度，scrollTop是文档内容顶部到可视窗口的高度，clientHeight是页面的视口大小，实际测试中需要scrollHight- scrollTop- clientHeight<N(N大于0，例如N可以为20)，页面效果比较好。可以规避用户上拉页面到底部了下一页数据不渲染的bug。

4、把返回的数据首次取N条渲染页面

代码如下（每次取20条数据）：
_this.total = this.customListTotal.length;// 数据总的条数
// 数据每页展示20条
this.customListTotal.slice(this.startIndex,this.currPageSize).map((val,ind)=>{res.body.detailsList.map((val,ind)=>{this.customList.push(val);this.insuranceList.push({list:[]});
})
if(this.total-1 > this.currPageSize){this.startIndex = this.currPageSize;
}

5、获取滚动条的当前位置

getScrollTop () {var scrollTop = 0if (document.documentElement && document.documentElement.scrollTop) {scrollTop = document.documentElement.scrollTop} else if (document.body) {scrollTop = document.body.scrollTop}return scrollTop
}

6、获取当前可视范围的高度

 getClientHeight () {var clientHeight = 0if (document.body.clientHeight && document.documentElement.clientHeight) {clientHeight=Math.min(document.body.clientHeight, document.documentElement.clientHeight)} else {clientHeight=Math.max(document.body.clientHeight, document.documentElement.clientHeight)}return clientHeight
}

7、获取页面文档的完整高度

 getScrollHeight () {return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
}

8、滚动事件触发下拉渲染

 onScroll () {if (this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 20) {if(this.startIndex>=this.currPageSize && this.total-1>this.startIndex){this.customListTotal.slice(this.startIndex,this.startIndex+this.currPageSize).map((val,ind)=>{//   res.body.detailsList.map((val,ind)=>{this.customList.push(val);this.insuranceList.push({list:[]});})this.startIndex = this.startIndex+this.currPageSize;}console.log('this.customList==',this.customList,this.customListTotal,this.startIndex,this.total);}
}

9、页面初始化后加上滚动监听事件

 this.$nextTick(function () { // 懒加载 上拉使用window.addEventListener('scroll', this.onScroll)
})

10、经过上述代码，用户下拉触底后，页面滚动条变短，页面内容增加。

11、全部代码：

<template><div class="main" ref="indexMain"><!--首页--><div class="main_top" ref="mainTop" id="mainTop" :style="mainTopStyle"><div style="display:flex;margin-top: 2.64rem"><span class="top_span01" :style="index>0?{marginLeft: '.14rem'}:''" v-for="(item,index) in headDetailsList.slice(0,2)">{{item.name}}：{{item.code}}</span><!--<span class="top_span01">家庭数量：{{familyNum}}个</span><span class="top_span01" style="margin-left: .14rem">客户人数：{{customers}}人</span>--></div><div style="display:flex;margin-top: .18rem"><span class="top_span01" :style="index>0?{marginLeft: '.14rem'}:''" v-for="(item,index) in headDetailsList.slice(2)">{{item.name}}：{{item.code}}</span><!-- <span class="top_span01">计划书：{{planbooks}}份</span><span class="top_span01" style="margin-left: .14rem">客户阅读：{{customerReads}}人</span><span class="top_span01" style="margin-left: .14rem">加保人数：{{jiabaoNum}}人</span>--></div><div style="position:relative;display:flex;margin-top: .32rem;align-items: center"><input class="top_input01" placeholder="请输入客户姓名" v-model="customerName" @change.self.prevent="" /><!--<el-button icon="el-icon-search" plain class="search_bth" @click="queryCustomerList"></el-button>--><img src="../../static/image/search.png" class="img02" @click.self.prevent=""><div class="search_bth2" @click.self.prevent="">搜索</div><div style="position: relative;margin-left: .15rem;display: flex;justify-content: center;align-items: center"><img src="../../static/image/shaixuan.png" class="img03" @click="shaixuanCustom"><span class="top_span02" style="" @click="">筛选</span></div></div></div><div class="main_body"><div class="main_body_item" v-for="(item,index) in customList" :key="'customList'+index"><div class="body_tag">{{item.type}}</div><div style="width:6.48rem;display: flex;justify-content:space-between;margin-top: .15rem;margin-right: .3rem"><div><span class="body_span01">户主：</span><span style="color:#363636">{{item.name}}</span></div><div style="width: 3.02rem;"><span class="body_span01">手机号：</span><a class="body_span02" :href="'tel:'+item.phone">{{item.phone}}</a><a class="body_span02" v-if="!item.phone" style="border: 0px solid #628DE1;color: rgb(54, 54, 54);">无</a></div><!-- <div><span class="body_span01">手机号：</span><a class="body_span02">{{item.phone?item.phone:'无'}}</a></div>--></div><div style="width:6.5rem;display: flex;justify-content:space-between;margin-top: .1rem;margin-right: .4rem"><div @click=""  style="display: flex;align-items: center;"><img class="body_img01" src="../../static/image/planbook.png" /><span class="body_span03">生成家庭计划书</span></div><divstyle="width: 3.02rem;display: flex;align-items: center;"><img class="body_img01" style="height: .55rem" src="../../static/image/zhuanfaurl.png" /><span class="body_span03" style="border-bottom: .02rem solid #628DE1;" @click.stop="">转发微投链接</span></div></div><div class="family_div"><div class="family_div_top" @click.prevent="">家庭保障<span style="margin-left: .14rem;"><i class="el-icon-arrow-down" @click.stop=""></i></span></div></div><div style="width:100%;display: none;flex-direction: column;align-items: center" :ref="'family'+index" :id="'family'+index" v-show="insuranceList[index].list.length>0"><div class="family_zujian"><span style="margin-left: .15rem">家庭图谱</span></div><div style="display: flex;justify-content: center"><FamilyAtlas ></FamilyAtlas></div><div class="family_zujian"><span style="margin-left: .15rem">保单详情</span></div><div class="insurance_list" ><div class="baodan_detail" v-for="(item1,index1) in insuranceList[index].list" :key="'list'+index1" :style="index1%2==1?{backgroundColor: '#ffffff'}:''"><!--当前客户家庭成员所有保单信息--><div style="width:100%;display: flex;flex-direction: column;align-items:center;margin-top: .2rem;"><!--当前客户某一个家庭成员保单信息--><div style="width: 6.5rem;display: flex;justify-content: space-between"><!--单个家庭成员信息--><div><span>{{item1.relationship}}：</span><span style="color:#363636">{{item1.name}}</span></div><div style="width: 3.02rem;"><span>手机号：</span><a class="body_span02" :href="'tel:'+item1.phone">{{item1.phone}}</a><a class="body_span02" v-if="!item1.phone" style="border: 0px solid #628DE1;color: rgb(54, 54, 54);">无</a></div><!-- <div><span>手机号：</span><a class="body_span02">{{item1.phone?item1.phone:'无'}}</a></div>--></div><div style="width: 6.5rem;display: flex;justify-content: space-between;margin-top: .2rem;margin-bottom: .2rem"><!--单个家庭成员信息--><div><span>已有重疾保额：</span><span style="color:#363636">{{item1.insuredAmount}}</span></div><div style="width: 3.02rem"><span>最高购买保额：</span><span style="color:#363636">{{item1.buyInsuredAmount}}</span></div></div><div class="baodan_info" v-for="(item2,index2) in item1.familyDetailsPolicyList" :key="'insurance'+index2"><!--每张表单信息--><div :style="{width:(index2==0 && (item1.type==1 || item1.type==2 || item1.type==3)?'4.9rem':'100%'),display: 'flex',flexDirection: 'column'}"><!--左侧保单信息--><div><span>投保人：</span><span class="body_span02" style="font-size: .24rem;" @click="">{{item2.policyHolder}}</span></div><div style="margin-top: .1rem"><span>被保人：</span><span style="color:#363636">{{item2.policyInsured}}</span></div><div style="margin-top: .1rem"><span>产品名称：</span><span style="color:#363636">{{item2.product}}</span></div><!--1重疾：保额：单位万；2年金：保费：正常显示--><!--<div style="margin-top: .2rem"><span>保费：</span><span style="color:#363636">{{item2.money}}</span></div>--><div style="margin-top: .1rem"><span>{{item2.type1 == '1'?'保额':(item2.type1 == '2'?'保费':'')}}：</span><span style="color:#363636">{{item2.money}}</span></div><div style="margin-top: .1rem"><span>投保时间：</span><span style="color:#363636">{{item2.time}}</span></div></div><div v-if="index2==0 && (item1.type==1 || item1.type==2 || item1.type==3)"><!--右侧戳 已加保 超龄 退保--><img :src="require('../../static/image/stamp'+item1.type+'.png')" class="img01" /></div></div></div></div><div class="custom_tag" v-if="item.type != '已加保'"><!--客户标签--><span class="custom_tag_span01">客户标签</span><span:familyCode="item.familyCode"insType="1":class="item.type == '待沟通'?'custom_tag_span02 custom_tag_span022':'custom_tag_span02'"@click.stop="">待沟通</span><span:familyCode="item.familyCode"insType="2":class="item.type == '无意愿'?'custom_tag_span02 custom_tag_span022':'custom_tag_span02'"@click.stop="">无意愿</span><span:familyCode="item.familyCode"insType="3":class="item.type == '重点关注'?'custom_tag_span03 custom_tag_span033':'custom_tag_span03'"@click.stop="">重点关注</span></div></div></div></div></div><div class="shaixuan_modal" v-show="mainFlag" @click.self.prevent=""><div class="shaixuan_div"><span style="width:6.5rem;margin-top: .36rem">客户状态</span><el-checkbox-group v-model="customerSatus" @change="shaixuanCustomStatus" class="shaixuan_01" ><el-checkboxv-for="(item,index) in customersInfoList.customerSatusList":label="item.code":key="item.code":style="index>0?{marginLeft:'1.2rem'}:''">{{item.name}}</el-checkbox></el-checkbox-group><span style="width:6.5rem;margin-top: .36rem">险种类型</span><el-checkbox-group v-model="insType" @change="shaixuanCustomType" class="shaixuan_01" ><el-checkboxv-for="(item,index) in customersInfoList.insTypeList":label="item.code":key="item.code":style="index>0?{marginLeft:'1.2rem'}:''">{{item.name}}</el-checkbox></el-checkbox-group><span style="width:6.5rem;margin-top: .36rem">计划书</span><el-radio-group v-model="prospectus" @change="shaixuanCustomBook" class="shaixuan_02" ><el-radiov-for="(item,index) in customersInfoList.planBookList":label="item.code":key="item.code":style="index>0?{marginLeft:'1.2rem'}:''">{{item.name}}</el-radio></el-radio-group><span style="width:6.5rem;margin-top: .36rem">客户阅读状态</span><el-radio-group v-model="readingState" @change="shaixuanCustomRead" class="shaixuan_02"><el-radiov-for="(item,index) in customersInfoList.readTypeList":label="item.code":key="item.code":style="index>0?{marginLeft:'1.2rem'}:''">{{item.name}}</el-radio></el-radio-group><span style="width:6.5rem;margin-top: .36rem">客户加保状态</span><el-radio-group v-model="additionalState" @change="shaixuanCustomIns" class="shaixuan_02" style="border-bottom: 0px solid #e0e0e0;"><el-radiov-for="(item,index) in customersInfoList.statusList":label="item.code":key="item.code":style="index>0?{marginLeft:'1.2rem'}:''">{{item.name}}</el-radio></el-radio-group><!-- <el-radio-group v-model="additionalState" @change="shaixuanCustomIns" class="shaixuan_021" style="border-bottom: 0px solid #e0e0e0;"><el-radiov-for="(item,index) in customersInfoList.statusList":label="item.code":key="item.code":style="index>0?{marginLeft:'1.2rem'}:''">{{item.name}}</el-radio></el-radio-group>--><div class="shaixuan_submit"><span class="shaixuan_span01" @click.stop="">重置</span><span class="shaixuan_span01 shaixuan_span02" @click.stop="">确定</span></div></div></div></div>
</template><script>import { MessageBox } from 'mint-ui';import FamilyAtlas from './FamilyAtlas';import Bus from'./Bus.js'import { Indicator} from 'mint-ui';export default {name: "index",data(){return{agentcode:'',// 业务员编码customerName:'',// 搜索中展示的客户姓名headDetailsList:[// 头部数据/*  {name: "家庭数量",code: "333个",},{name: "客户人数",code: "333人",},{name: "计划书",code: "222份",},{name: "客户阅读",code: "100人",},{name: "加保人数",code: "50人",}*/],mainFlag:false,// 筛选框弹出与隐藏mainTopStyle: {background:`url(` + require('../../static/image/top.png')+ `) no-repeat`,backgroundSize: '100% 100%'},// 头部的背景图片urlcustomList:[// 客户投保信息数组{name:'',// 户主姓名type:'',// 客户标签phone: '',familyCode: "",// 家庭编号customerCode:''// 户主客户号}],customListTotal:[],// 总数据insuranceList: [{name:'李立勇',// 姓名relationship:'丈夫', // 关系（丈夫）phone:'15313161006',insuredAmount:'50万',// 已有重疾保额buyInsuredAmount:'100万',// 购买最高保额type:'1', // 红戳  已加保-1 年龄超限-2list:[{policyHolder: "李大明",// 投保人policyInsured: "李大明", // 被保人product: "福临门",// 产品名称money: "30万",// 保费time: "2012-08-12" // 投保时间},{policyHolder: "李大明",// 投保人policyInsured: "李大明", // 被保人product: "福临门",// 产品名称money: "30万",// 保费time: "2012-08-12" // 投保时间}]}],familyClickObj:[// 家庭保障点击信息统计/*{orderNum: 0, // 家庭图谱数组中索引序号membersCount:5 // 家庭成员数目}*/],customersInfoList:{// 筛选弹框的数据customerSatusList:[ // 客户状态 多选框{code:'3',name:'重点关注'},{code:'1',name:'待沟通'},{code:'2',name:'无意愿'}],insTypeList:[ // 险种类型 多选框{code:'1',name:'重疾险'},{code:'2',name:'年金险'}],planBookList:[ // 计划书 单选框{code:'',name:'全部'},{code:'1',name:'已制作'},{code:'2',name:'未制作'}],readTypeList:[// 客户阅读状态 单选框{code:'',name:'全部'},{code:'1',name:'已阅读'},{code:'2',name:'未阅读'}],statusList:[// 客户加保状态 单选框{code:'',name:'全部'},{code:'1',name:'已加保'},{code:'2',name:'未加保'}]},customerSatus:[],// 客户状态insType:[], // 险种类型prospectus:'',// 计划书readingState:'',// 客户阅读状态additionalState:'',// 客户加保状态customerSatusBack:[],// 客户状态--最近一次确定勾选的数据insTypeBack:[], // 险种类型--最近一次确定勾选的数据prospectusBack:'',// 计划书--最近一次确定勾选的数据readingStateBack:'',// 客户阅读状态--最近一次确定勾选的数据additionalStateBack:'',// 客户加保状态--最近一次确定勾选的数据/*        customerSatusDefault:[],// 客户状态-重置为默认状态insTypeDefault:[], // 险种类型-重置为默认状态prospectusDefault:'1',// 计划书-重置为默认状态readingStateDefault:'1',// 客户阅读状态-重置为默认状态additionalStateDefault:'1',// 客户加保状态-重置为默认状态*/openid:'',//业务员openidisInit:true,// 是否是初始化页面，true-是，false-否isShow: false,// 整个页面是否展示startIndex:0,// 客户列表customListTotal数组索引currPageSize:20,// 当前每页的条数total:0,// customListTotal数组长度}},mounted(){},methods:{/**获取滚动条当前的位置**/getScrollTop () {var scrollTop = 0if (document.documentElement && document.documentElement.scrollTop) {scrollTop = document.documentElement.scrollTop} else if (document.body) {scrollTop = document.body.scrollTop}return scrollTop},/**获取当前可视范围的高度**/getClientHeight () {var clientHeight = 0if (document.body.clientHeight && document.documentElement.clientHeight) {clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)} else {clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)}return clientHeight},/**获取文档完整的高度**/getScrollHeight () {return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)},/**滚动事件触发下拉加载**/onScroll () {if (this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 20) {if(this.startIndex>=this.currPageSize && this.total-1>this.startIndex){this.customListTotal.slice(this.startIndex,this.startIndex+this.currPageSize).map((val,ind)=>{//   res.body.detailsList.map((val,ind)=>{this.customList.push(val);this.insuranceList.push({list:[]});})this.startIndex = this.startIndex+this.currPageSize;}console.log('this.customList==',this.customList,this.customListTotal,this.startIndex,this.total);}},/**页面初始化**/},}
</script><style scoped>.main{width: 100%;height: 100%;overflow: hidden;display: flex;flex-direction: column;/*justify-content: center;*/background: rgba(243,243,243,1);font-family:Source Han Sans CN;/*align-items: center;*//*    background: url("../../static/image/qrcode-backgroundimage.png") no-repeat;background-size: 100% 100%;*/}.AA{}.main_top{position: relative;width: 100%;height: 5.21rem;display: flex;flex-direction: column;align-items: center;/*background: url("../../static/image/top.png") no-repeat;*//* background-size: 100% 100%;*/font-size:.24rem;font-family:PingFang SC;font-weight:400;color:rgba(79,134,96,1);}.AAA{}.top_span01{height:.37rem;display: flex;align-items: center;padding-left: .11rem;padding-right: .11rem;border:1px solid rgba(79,134,96,1);border-radius:.05rem;}.top_span02{/* width:1.27rem;height:.62rem;display: flex;justify-content: center;align-items: center;background:rgba(228,158,38,1);box-shadow:0rem .05rem .31rem .01rem rgba(63,111,140,0.21);border-radius:.31rem;*/position: absolute;font-size:.26rem;font-weight:400;color:rgba(255,255,255,1);}.top_input01{/*width:5.26rem;*/width:3.29rem;padding-top: .15rem;padding-bottom: .15rem;padding-left: .76rem;padding-right: 1.1rem;background:rgba(255,255,255,1);box-shadow:0rem 0.05rem 0.31rem 0.01rem rgba(63,111,140,0.21);border-radius:.40rem;font-size:.26rem;font-weight:400;color:rgba(102,102,102,1);}.top_input01::-webkit-input-placeholder { /* Chrome/Opera/Safari */font-size:.26rem;font-weight:400;color:rgba(102,102,102,1);opacity: 1;}.top_input01:-moz-placeholder {/* Mozilla Firefox 4 to 18 */font-size:.26rem;font-weight:400;color:rgba(102,102,102,1);opacity: 1;}.top_input01::-moz-placeholder {/* Mozilla Firefox 19+ */font-size:.26rem;font-weight:400;color:rgba(102,102,102,1);opacity: 1;}.top_input01::-ms-input-placeholder {/* Internet Explorer 10+ */font-size:.26rem;font-weight:400;color:rgba(102,102,102,1);opacity: 1;}.search_bth{position: absolute;width: .69rem;height: .69rem;margin-left: 1.06rem;padding: 0;border: 0px solid #dcdfe6;}.search_bth2{position: absolute;width:.99rem;height:.62rem;display: flex;justify-content: center;align-items: center;font-size:.26rem;font-weight:400;color:rgba(255,255,255,1);border-radius:.31rem;left: 4.17rem;bottom: .01rem;background: url("../../static/image/search2.png") no-repeat;background-size: 100% 100%;}.main_body{display: flex;flex-direction: column;align-items: center;margin-bottom: .3rem;}.bb{}.main_body_item{position: relative;width:7.10rem;display: flex;margin-top: .3rem;flex-direction: column;align-items: flex-end;background:rgba(255,255,255,1);border-radius:.10rem;}.body_tag{width:1.37rem;height:.44rem;display: flex;justify-content: center;align-items: center;font-size:.28rem;font-weight:400;color:rgba(255,255,255,1);/* background:rgba(228,158,38,1);*/background: url("../../static/image/jiabao.png") no-repeat;background-size: 100% 100%;border-top-right-radius:.1rem;border-bottom-left-radius:.1rem;}.body_span01{font-size:.28rem;font-weight:400;color:rgba(152,152,152,1);}.body_span02{font-size:.28rem;font-weight:400;color:#628DE1;border-bottom: .02rem solid #628DE1;}.body_span03{font-size:.28rem;font-weight:400;color:#628DE1;border-bottom: .02rem solid #4A90E2;}.body_img01{width: .55rem;height: .57rem;}.family_div{width: 100%;display: flex;flex-direction: column;margin-top: .38rem;border-top: 1px solid rgba(224,230,235,1);}.family_div_top{width: 100%;height: .86rem;display: flex;align-items: center;justify-content: center;border-radius: .1rem;font-size:.28rem;font-weight:400;color:rgba(152,152,152,1);}.a2{}.family_zujian{width: 100%;display: flex;flex-direction: column;justify-content: center;font-size:.30rem;font-weight:bold;color:rgba(54,54,54,1);}.family_zujian::before{content: '';position: absolute;width:.05rem;height:.29rem;background:rgba(111,194,137,1);}.insurance_list{width: 100%;display: flex;flex-direction: column;font-size:.30rem;font-weight:bold;color:rgba(54,54,54,1);}.baodan_detail{width:100%;display: flex;justify-content: center;margin-top: .23rem;background:rgba(245,255,253,1);font-size:.28rem;font-weight:400;color:rgba(152,152,152,1);}.baodan_info{width:6.50rem;display: flex;justify-content: space-between;margin-bottom: .2rem;padding-top: .2rem;font-size:.24rem;color:rgba(152,152,152,1);border-top:1px solid rgba(223,229,235,1);}.img01{width: 1.5rem;height: 1.5rem;}.img02{position: absolute;width: .3rem;height: .3rem;left: .32rem;}.img03{/* position: absolute;*/width: 1.27rem;height: .63rem;}.custom_tag{width:100%;height:.98rem;display: flex;align-items: center;background:rgba(255,255,255,.11);box-shadow:0rem 0rem .21rem 0rem rgba(0,41,14,.11);border-radius:0rem 0rem .10rem .10rem;}.custom_tag_span01{margin-left: .39rem;font-size:.26rem;font-weight:bold;color:rgba(152,152,152,1);}.custom_tag_span02{/*   width:1.31rem;height:.52rem;line-height: .52rem;text-align: center;*//* display: flex;justify-content: center;align-items: center;*/padding: .092rem .3rem .095rem;font-size: .25rem;font-weight: 400;color: #989898;margin-left: .38rem;border:1px solid rgba(130,130,130,1);border-radius:.10rem;}.custom_tag_span022{/*   width:1.31rem;height:.52rem;line-height: .52rem;text-align: center;*//* display: flex;justify-content: center;align-items: center;*/padding: .112rem .318rem;border: 0px solid #828282;color:rgba(255,255,255,1);background: url("../../static/image/custag.png") no-repeat;background-size: 100% 100%;}.custom_tag_span03{/*width: 1.33rem;height: .54rem;*/margin-left: .38rem;padding: .094rem .176rem .095rem;border: 1px solid #828282;font-size: .25rem;font-weight: 400;color: #989898;border-radius:.10rem;/*    background: url("../../static/image/custag.png") no-repeat;background-size: 100% 100%;*//*background:rgba(228,158,38,1);*/}.custom_tag_span033{/*width: 1.33rem;height: .54rem;*/margin-left: .38rem;padding: .112rem .1933rem .112rem;border: 0px solid #828282;color:rgba(255,255,255,1);background: url("../../static/image/custag.png") no-repeat;background-size: 100% 100%;/*background:rgba(228,158,38,1);*/}.shaixuan_modal{position: fixed;width: 100%;height: 100%;left: 0;top:0;background:rgba(0,0,0,.5);}.shaixuan_div{position: fixed;left: 0;bottom: 0;width:100%;/*height:8.74rem;*/display: flex;flex-direction: column;align-items: center;background:rgba(255,255,255,1);box-shadow:0rem 0rem .15rem 0rem rgba(0, 0, 0, 0.06);border-radius:.10rem .10rem 0rem 0rem;font-size:.28rem;font-weight:400;color:rgba(152,152,152,1);}.shaixuan_01{width: 6.5rem;display: flex;/*justify-content: space-between;*/padding-top: .29rem;padding-bottom: .38rem;border-bottom: 1px solid rgba(224,224,224,1);}.shaixuan_01>>>.el-checkbox__inner{width:.30rem;height:.30rem;background:rgba(255,255,255,1);border:.02rem solid rgba(224,224,224,1);border-radius:.06rem;}.shaixuan_01>>>.el-checkbox__input.is-checked .el-checkbox__inner{width:.30rem;height:.30rem;background:rgba(97,148,229,1);border: 0px solid #6194e5;border-radius:.06rem;}.shaixuan_01>>>.el-checkbox__inner:after{width: 5px;height: 8px;left: 5px;top: 2px;}.shaixuan_01>>>.el-checkbox__label{padding-left: .14rem;font-size:.28rem;font-weight:400;color:rgba(54,54,54,1);/*    color: #6194e5;*/}.shaixuan_01>>>.el-checkbox__input.is-checked+.el-checkbox__label{color: #6194e5;}.shaixuan_01>>>.el-checkbox{margin-right: 0;}.shaixuan_02{position: relative;width: 6.5rem;height: .5rem;display: flex;align-items: center;/*justify-content: space-between;*/padding-top: .29rem;padding-bottom: .3rem;border-bottom: 1px solid rgba(224,224,224,1);}.shaixuan_02>>>.el-radio__label{display: inline-table;padding-left: .14rem;font-size:.28rem;font-weight:400;color:rgba(54,54,54,1);}.shaixuan_02>>>.el-radio{margin-right: 0;}.shaixuan_02>>>.el-radio__inner{/*    width:.30rem;height:.30rem;*/width:14px;height:14px;background:rgba(255,255,255,1);border:1px solid rgba(224,224,224,1);}.shaixuan_02>>>.el-radio__input.is-checked .el-radio__inner{/* width:.30rem;height:.30rem;*/width:14px;height:14px;background:rgba(255,255,255,1);border: 1px solid #6194E5;}.shaixuan_02>>>.el-radio__inner:after{/*  width: .2rem;height: .2rem;*/width: 9px;height: 9px;/*    left: 48%;top: 48%;*/background-color:#6194E5;}.shaixuan_02>>>.el-radio__input.is-checked+.el-radio__label{color: #6194e5;}.shaixuan_submit{display: flex;width: 100%;height: .97rem;background:rgba(255,255,255,1);border:1px solid rgba(224,224,224,1);font-size:.30rem;font-weight:400;color:rgba(54,54,54,1);}.shaixuan_span01{width: 50%;height: 100%;display: flex;justify-content: center;align-items: center;background:rgba(255,255,255,1);/* border:1px solid rgba(224,224,224,1);*/}.shaixuan_span02{font-size:.30rem;font-weight:400;color:rgba(255,255,255,1);background:rgba(97,148,229,1);}
</style>

vue技术框架下手机端移动上拉实现分页功能相关推荐

手把手教你实现Android RecyclerView上拉加载功能
心灵鸡汤:知之者不如好之者,好之者不如乐之者. 摘要一直在用到RecyclerView时都会微微一颤,因为一直都没去了解怎么实现上拉加载,受够了每次去Github找开源引入,因为感觉就为了一个上拉加 ...
RecyclerView实现上拉加载功能
最近在做需求的时候,需要实现列表的上拉加载功能.在这里进行记录分享. 其实上拉加载功能只需要为RecyclerView的Item布局添加一个FooterView,然后通过判断是否滑动到最后一条Item ...
h5结合vant框架，实现列表上拉加载下拉刷新
最近在做h5移动页面开发,并且需要用移动端android和ios将h5嵌进去.在开发过程中,使用了vant这个框架: vant文档:https://youzan.github.io/vant/#/zh ...
php中手机端ajax上拉加载更多,jQuery手机网页上拉加载更多
手机网页和PC网页都可以使用的上拉加载更多内容,其中LoadingDataFn自己改为ajax加载就可以了var page = 1, //分页码 off_on = false, //分页开关(滚动加载 ...
vue导航栏滚动下拉条上拉隐藏，下拉显示切换样式变化(源码)
目录案例1 源码如下效果如下案例2 源码如下效果如下最后案例1 源码如下 navBar内容,上拉显示navBar,下拉隐藏navBar,固定在顶部,样式切换 <template> ...
html 设置移动端页面滚动,a.html · 焚心/移动端页面上下滚动加多页面上拉加载功能及mescroll插件的使用 - Gitee.com...
我的我的交易记录可兑换签纸贺兑换历史活动名称:{{item.title}} 有效期至:{{item.time}} 合计可用额: {{item.price}}元去兑换交易记录: 兑换10. ...
BaseQuickAdapter上拉加载功能实现
最近使用BaseQuickAdapter进行RecyclerView 的Adapter的数据绑定显示. 实现上拉加载与下拉刷新功能,遇到如下问题: 1.首先是实现下拉刷新.下拉加载的监听(xml布局就 ...
uniapp实现下拉刷新及上拉（分页）加载更多（app，H5，小程序均可使用）
开门见山地说,在移动端开发中,80%的项目都会涉及到列表展示,而有了列表不可避免的需求就是列表的下拉刷新和上拉加载更多.本篇文章主要介绍在使用uniapp开发移动端的过程中,比较好用的一个下拉及上拉组 ...
js原生实现上拉加载功能
2019_6_15 js原生实现上拉加载主要原理是视图窗口的可视高度,滚动条当前位置,和滚动窗口的高度直接的关系 function SelectCandidatesData(type, page, ...

vue技术框架下手机端移动上拉实现分页功能