移动端开发时，H5长页面在iOS系统中滑动时，当页面滑动到顶部或底部时，页面还能够上滑或下滑，手指离开屏幕后回弹，这就时橡皮筋效果，单纯来说这个效果并没有什么问题，但是它对H5页面却并不友好，会导致穿透，导致H5页面出现被截断的假象；

• 解决办法，动态计算页面高度添加禁止滑动

   <template>
     <section class = "structure" :style="{height:outerHeight}" @touchmove.stop  @touchstart.stop="inputBlur">
        <section v-if="header" class = "header-title" @touchmove.prevent>
           <slot name="header"></slot>
        </section>
        <section v-if="main" :style="{height:mainHeight}"  @touchmove.stop>
           <slot name="main"></slot>    
        </section>
        <section v-if="tabBarb"  @touchmove.stop class = "footer">
           <slot name="tabBarb"></slot> 
        </section>
        <section v-if="footer" :style="{height:mainHeight}"  @touchmove.prevent id = "J_structure_footer" class = "footer">
           <slot name="footer"></slot>    
        </section>
        <section id="J_structure_ui_box">
           <slot name="ui_box"></slot>    
        </section>
     </section>
   </template>
   
<script>
  export default{
      name:"structure",
      props:{
	      tabBar:{
		      type:Boolean,
		      default:false
	      },
	      header:{
		      type:Boolean,
		      default:false
	      },
	      footer:{
		      type:Boolean,
		      default:false
	      },
	},
	data(){
		return {
	         structureHeight:document.documentElement.clientHeight,
		};
	},
	computed:{
		outerHeight(){
			return `${this.structureHeight}px`;
		},
		mainHeight(){
		   let h = this.structureHeight;
		   if(this.tabBar) h -= 53;
		   if(this.footer) h -=80;
		   if(this.header) h -=46;
		   return `${h}px`;
		}
	},
	mounted:{
	   this.getMainHeight();
	},
	updated(){
		this.getMainHeight();
	},
	methods:{
	    inputBlur(){
	    	let $focus = document.activeElement;
	    	if($focus.tagName ==="INPUT" || $focus.tagName === "TEXTAREA"){
	    	  $focus.blur()
	    	}
	  },
	  getMainHeight(){
	      this.$nextTick(()=>{
	          let structureHeught =  document.documentElement.clientHeight;
	          if(structureHeught <= this.structureHeught )return;
	          this.structureHeught  = structureHeught 
	      });
	  }
   },
  
</script>

<style lang = "less" scoped>
  .structure{
      .g-flex();
            align-items:flex-start;
            align-content:flex-start;
            flex-warp:warp;
            .header-title{
              flex: 0 0 100%;
              overflow:hidden;
            }
            .main{
                flex: 0 0 100%;
              overflow:hidden;
            }
               .footer{
                flex: 0 0 100%;
                align-self : flex-end;
                overflow:hidden;
            }
}
</style>