用better-scroll来解决ios中html5页面fixed布局不兼容问题的处理

在做webapp的时候，会遇到顶部导航，底部按钮之类的需求，前端第一想到的就是fixed定位，在Android中是没有问题的，然而在ios中却不那么尽如人意。

给大家介绍一个方法，仍然使用fixed，只不过在需要滚动部分的外层再加一层div,也是fixed布局。这里需要用到better-scroll插件。

首先，来看一下页面：

html布局

顶部导航fixed部分

        

           

               
• 
                  　　{{item.name}}
                 

           

       

中间滑动fixed部分,可下拉刷新

       

           
               

                   

                       
• 
                          　　
  
                                 
                             
  
                             
  
                                 

  {{item.name}}

  
                                 

  {{markList.name}}

  
                                 

  ￥{{item.price}}起已售 {{item.salesNum}}

  
                             
  
                         

                   

                   

                        {{bottomText}}
                   

               

           
       

style部分

     .nav{width: 100%;position: fixed;top:0;left:0;z-index: 4;background: #fff;height: 0.91rem;}
     .loadmoreBox{width: 100%;}
    .scrollWrapper{position: fixed;width: 100%;top: 0.89rem;bottom: 0;}
    .foodgest{height: 100%;overflow: hidden;}

大概的布局就是这样的，有不明白的可以私信我，在线的情况下会回复的