Parcourir la source

新增返回按钮,及页面显示问题处理

yangc il y a 8 ans
Parent
commit
87765bfaee

+ 1 - 0
assets/scss/mobileCommon.scss

@@ -183,6 +183,7 @@ ins, a {
 }
 ::-webkit-scrollbar {
   opacity: 0;
+  display: none;
 }
 
 input {

+ 16 - 0
components/mobile/Home.vue

@@ -13,6 +13,7 @@
     </div>
     <div v-if="!showMainSearch">
       <div class="home-header" :style="'background:url(' + bgUrl + ')no-repeat center center/100% 6.14rem'">
+        <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
         <div class="home-search">
           <!--<ul>-->
           <!--<li :class="activeType=='model'?'active':''" @click="activeType='model'"><span>型号</span></li>-->
@@ -146,6 +147,9 @@
         } else {
           this.showLoginBox = true
         }
+      },
+      goLastPage: function () {
+        window.history.back(-1)
       }
     },
     computed: {
@@ -171,6 +175,18 @@
       width:100%;
       height:6.12rem;
       padding-bottom:1rem;
+      >a{
+        font-size:.28rem;
+        color:#fff;
+        position: absolute;
+        left: .1rem;
+        top: .2rem;
+        i{
+          font-size: .48rem;
+          margin-right: -.1rem;
+          color: #666;
+        }
+      }
       .home-search{
         width:6rem;
         line-height: .3rem;

+ 6 - 1
components/mobile/MobileHeader.vue

@@ -55,7 +55,7 @@
       </div>
     </div>-->
     <div class="mobile-header" v-if="showHeader && !showMainSearch">
-      <!--<a class="iconfont icon-fanhui" @click="goLastPage">返回</a>-->
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
       <p>{{title}}
         <span @click="goMainSearch"><i class="icon-sousuo iconfont"></i>搜索</span>
       </p>
@@ -282,6 +282,11 @@
   .mobile-header a{
     font-size:.28rem;
     color:#fff;
+    position: absolute;
+  }
+  .mobile-header a i{
+    font-size: .48rem;
+    margin-right: -.1rem;
   }
   .mobile-header p span {
     position: absolute;

+ 4 - 1
components/mobile/brand/BrandCenter.vue

@@ -100,10 +100,13 @@
 </script>
 <style lang="scss" scoped>
   .mobile-brand-center {
+    position: fixed;
+    top: .88rem;
+    bottom: .98rem;
+    overflow-y: auto;
     width: 100%;
     background: #f7f7f7;
     padding-top: .24rem;
-    margin-bottom: .98rem;
     .mobile-brand-wrap {
       width: 6.96rem;
       background: #fff;

+ 1 - 1
components/mobile/store/StoreDetail.vue

@@ -229,7 +229,7 @@
         position: relative;
         img {
           max-height: 2.1rem;
-          max-width: 3.71rem;
+          max-width: 3.6rem;
         }
         >i {
           position: absolute;

+ 10 - 5
pages/mobile/shop/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="shop">
+  <div class="shop" id="shop">
     <div class="shop-top">
       <p><i class="iconfont icon-dianpu1"></i><span>{{list.totalElements || 0}}</span>家店铺</p>
       <span @click="onClick()">{{downName}} <i class="iconfont icon-arrow-down"></i></span>
@@ -98,15 +98,16 @@
     mounted: function () {
       let _this = this
       _this.$nextTick(function () {
-        window.addEventListener('scroll', function () {
+        document.getElementById('shop').addEventListener('scroll', function () {
           _this.scroll()
         }, false)
       })
     },
     methods: {
       scroll: function () {
-        let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
-        if (Math.ceil(scrolled + window.screen.availHeight) >= document.body.scrollHeight && !this.isSearchingMore && this.page < this.allPage) {
+        let obj = document.getElementById('shop')
+        let scrolled = obj.scrollTop
+        if (Math.ceil(scrolled + obj.clientHeight) >= obj.scrollHeight && !this.isSearchingMore && this.page < this.allPage) {
           this.getMoreStore()
         }
       },
@@ -188,7 +189,11 @@
 
 <style scoped lang="scss">
   .shop{
-    margin-bottom: .98rem;
+    position: fixed;
+    width: 100%;
+    top: .88rem;
+    bottom: .98rem;
+    overflow-y: auto;
     min-height: 10rem;
     background: #e2e4e6;
   .shop-top{

+ 5 - 1
pages/mobile/user/index.vue

@@ -201,7 +201,11 @@
 
 <style scoped lang="scss">
   .user-content{
-    margin-bottom: .98rem;
+    position: fixed;
+    top: .88rem;
+    bottom: .98rem;
+    width: 100%;
+    overflow-y: auto;
     background: #dfe2e4;
 
     .none-state{