修改样式

package.json

@@ -91,6 +91,7 @@
     "vconsole": "^3.1.0",
     "vue": "^2.5.16",
     "vue-awesome-swiper": "^3.1.3",
+    "vue-pull-to": "^0.1.6",
     "vue-router": "^3.0.1",
     "vue-scroller": "^2.2.4",
     "vuex": "^3.0.1"

src/pages/kejiji/webview/components/pull-to-refresh/index.vue

+<template>
+    <div :id="eleId" class="pull-container">
+        <div class="scroller">
+            <div class="pulldown"
+                 :class="[pulldownChangeStyle,{'hide':!displaypullDownDiv}]"
+                 :style="{'margin-top':'-'+pullDownDiff+'px'}">
+                <div class="pulldown-icon"></div>
+                <div class="pulldown-label">{{pullDownTip}}</div>
+            </div>
+            <slot></slot>
+            <div class="pullup"
+                 :class="[pullupChangeStyle,{'hide':!displaypullUpDiv}]">
+                <div class="pullup-icon"></div>
+                <div class="pullup-label">{{pullUpTip}}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    import Scroll from './myScroll'
+
+    const PULL_DOWN_NORMAL = '下拉刷新'
+    const PULL_DOWN_RELEASE = '释放加载'
+    const PULL_DOWN_LOADING = '加载中，请稍后'
+
+    const PULL_UP_NORMAL = '上拉刷新'
+    const PULL_UP_RELEASE = '释放加载'
+    const PULL_UP_LOADING = '加载中，请稍后'
+
+    // 加载状态-1默认，0显示提示下拉信息，1显示释放刷新信息，2执行加载数据，只有当为-1时才能再次加载
+    const STATE_DEFAULT = -1
+    const STATE_PULL_NORMAL = 0
+    const STATE_PULL_RELEASE = 1
+    const STATE_PULL_LOADING = 2
+
+    const STYLE_RELEASE = 'release'
+    const STYLE_REFRESH = 'refresh'
+
+    //不写到vue data中，优化内存
+    var timeoutHandler = 0,
+        timeout = 30000,//timeout of reset refreshing state if u donnot call the finshCallback
+        pullDownHeight = 50,//pull down element height
+        pullUpHeight = 50;
+
+    export default {
+        props: {
+            disablePulldown: {
+                type: Boolean,
+                default: false,
+            },
+            disablePullup: {
+                type: Boolean,
+                default: false,
+            }
+        },
+        data() {
+            return {
+                displaypullDownDiv: false,
+                displaypullUpDiv: false,
+                pullUpTip: PULL_UP_NORMAL,
+                pullDownTip: PULL_DOWN_NORMAL,
+                refreshStep: STATE_DEFAULT,
+                eleId: 'bajianscroll',
+                pulldownChangeStyle: '',
+                pullupChangeStyle: '',
+                pullDownDiff: 0
+            }
+        },
+        mounted() {
+            this.$nextTick(function () {
+                this.eleId = 'bajian' + Math.round(Math.random() * 1000)
+                setTimeout(() => {
+                    this.registerDrag()
+                }, 50)
+
+            })
+        }
+        ,
+        methods: {
+            registerDrag() {
+                this.myscroll = new Scroll('#' + this.eleId)
+                this.myscroll.on('scroll', this._onTouchMove);
+                this.myscroll.on('scrollEnd', this._onTouchEnd);
+            },
+
+            _onTouchMove() {
+                if (this.refreshStep == STATE_PULL_LOADING)
+                    return;
+
+                if (!this.disablePulldown && this.myscroll.y > 5 && this.myscroll.y < pullDownHeight / 2) {
+                    this.pullDownDiff = pullDownHeight - this.myscroll.y;
+                    if (this.refreshStep === STATE_PULL_NORMAL) return;
+                    this.displaypullDownDiv = true
+                    this.displaypullUpDiv = false
+                    this.pulldownChangeStyle = ''
+                    this.pullDownTip = PULL_DOWN_NORMAL
+                    this.refreshStep = STATE_PULL_NORMAL
+                } else if (!this.disablePulldown && this.myscroll.y >= pullDownHeight) {
+                    this.pulldownChangeStyle = STYLE_RELEASE
+                    this.pullDownTip = PULL_DOWN_RELEASE
+                    this.refreshStep = STATE_PULL_RELEASE
+                } else if (!this.disablePullup && this.myscroll.y < -5 && -this.myscroll.y >= pullUpHeight - this.myscroll.maxScrollY) {
+                    this.pullupChangeStyle = STYLE_RELEASE
+                    this.pullUpTip = PULL_UP_RELEASE
+                    this.refreshStep = STATE_PULL_RELEASE
+                } else if (!this.disablePullup && this.myscroll.y < -5 && this.myscroll.y < this.myscroll.maxScrollY && this.myscroll.y > -pullUpHeight + this.myscroll.maxScrollY) {
+                    if (this.refreshStep === STATE_PULL_NORMAL) return;
+                    this.displaypullUpDiv = true
+                    this.displaypullDownDiv = false
+                    this.pullupChangeStyle = ''
+                    this.pullUpTip = PULL_UP_NORMAL
+                    this.refreshStep = STATE_PULL_NORMAL
+                }
+            },
+            reset() {
+                if (this.refreshStep != STATE_DEFAULT) {
+                    this.refreshStep = STATE_DEFAULT
+                    if (!this.disablePulldown) {
+                        this.displaypullDownDiv = false
+                        this.pulldownChangeStyle = ''
+                    }
+                    if (!this.disablePullup) {
+                        this.displaypullUpDiv = false
+                        this.pullupChangeStyle = ''
+                    }
+                    setTimeout(() => {
+                        this.myscroll.refresh();
+                    }, 0)
+                    clearTimeout(timeoutHandler)
+                }
+            },
+
+            _onTouchEnd() {
+                this.pullDownDiff = 0
+                if (this.refreshStep == STATE_PULL_RELEASE) {
+                    if (!this.disablePullup && this.pullupChangeStyle == STYLE_RELEASE) {
+                        this.myscroll.maxScrollY < -10 && this.myscroll.scrollTo(0, this.myscroll.maxScrollY - pullUpHeight)
+                        this.pullupChangeStyle = STYLE_REFRESH
+                        this.pullUpTip = PULL_UP_LOADING
+                        this.refreshStep = STATE_PULL_LOADING;
+                        this.$emit('on-pullup', this.reset);
+                    } else if (!this.disablePulldown && this.pulldownChangeStyle == STYLE_RELEASE) {
+                        this.pulldownChangeStyle = STYLE_REFRESH
+                        this.pullDownTip = PULL_DOWN_LOADING
+                        this.refreshStep = STATE_PULL_LOADING;
+                        this.$emit('on-pulldown', this.reset);
+                    }
+
+                    timeoutHandler = window.setTimeout(() => {
+                        if (this.refreshStep == STATE_PULL_LOADING)
+                            this.reset();
+                    }, timeout);
+                } else if (this.refreshStep != STATE_PULL_LOADING) {
+                    this.reset();
+                }
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .scroller {
+        min-height: 101%; /*修正内容高度不够无法scroll*/
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+
+    .pulldown, .pullup {
+        transition: all 0.2s linear;
+    }
+
+    .hide {
+        display: none;
+    }
+
+    .pull-container {
+        overflow: hidden;
+        transform: translateZ(0);
+        user-select: none;
+        text-size-adjust: none;
+    }
+
+    /*refresh start*/
+    .pulldown, .pullup {
+        height: 50px;
+        line-height: 50px;
+        padding: 5px 15px;
+        font-weight: bold;
+        font-size: 14px;
+        color: #888;
+        text-align: center;
+    }
+
+    .pulldown .pulldown-icon, .pullup .pullup-icon {
+        display: block;
+        width: 40px;
+        height: 40px;
+        background: url(./pull-icon@2x.png) 0 0 no-repeat;
+        -webkit-background-size: 40px 80px;
+        background-size: 40px 80px;
+        -webkit-transition-property: -webkit-transform;
+        -webkit-transition-duration: 250ms;
+    }
+
+    .pulldown .pulldown-label, .pullup .pullup-label {
+        position: relative;
+        top: -40px;
+    }
+
+    .pulldown .pulldown-icon {
+        -webkit-transform: rotate(0deg) translateZ(0);
+    }
+
+    .pullup .pullup-icon {
+        -webkit-transform: rotate(-180deg) translateZ(0);
+    }
+
+    .pulldown.release .pulldown-icon {
+        -webkit-transform: rotate(-180deg) translateZ(0);
+    }
+
+    .pullup.release .pullup-icon {
+        -webkit-transform: rotate(0deg) translateZ(0);
+    }
+
+    .pulldown.refresh .pulldown-icon, .pullup.refresh .pullup-icon {
+        background-position: 0 100%;
+        -webkit-transition-duration: 0ms;
+        -webkit-animation: spinner 3s infinite linear;
+        animation: spinner 3s infinite linear;
+    }
+
+    /*通用转动动画*/
+    @-webkit-keyframes spinner {
+        0% {
+            -webkit-transform: rotate(0deg);
+        }
+        50% {
+            -webkit-transform: rotate(180deg);
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+        }
+    }
+
+    /*refresh end*/
+
+</style>
\ No newline at end of file

src/pages/kejiji/webview/components/pull-to-refresh/myScroll.js

+import IScroll from './iscroll-probe.js'
+
+
+var extend = function (oldObj, newObj) {
+    for (var key in newObj) {
+        oldObj[key] = newObj[key];
+    }
+    return oldObj;
+};
+
+var Scroll = function (selector, opts) {
+    var $scroll;
+    var options = {
+        probeType: 2,//probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。
+        scrollbars: 'custom',//有滚动条
+        mouseWheel: true,//允许滑轮滚动
+        fadeScrollbars: true,//滚动时显示滚动条，默认影藏，并且是淡出淡入效果
+        bounce: true,//边界反弹
+        listenX: false,
+        interactiveScrollbars: true,//滚动条可以拖动
+        shrinkScrollbars: 'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
+        click: true,// 允许点击事件
+        momentum: true,// 允许有惯性滑动
+        preventDefaultException: {tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|IMG)$/}
+    };
+    options = extend(options, opts || {});
+
+    IScroll.utils.isBadAndroid = false;//处理页面抖动
+    $scroll = new IScroll(selector, options);
+
+    $scroll.refresh();
+    return $scroll
+};
+
+
+if (typeof module != 'undefined' && module.exports) {
+    module.exports = Scroll;
+} else {
+    window.scroll = Scroll;
+}
+export default Scroll;
+// document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

src/pages/kejiji/webview/content/page/home.less

@@ -16,10 +16,10 @@
   opacity: 0;
   background: transparent;
 }
-// .today-news{
-//   background: #fff;
-//   padding-top: 30px;
-// }
+.today-news{
+  background: #fff;
+  padding-top: 30px;
+}
 .nocolor{
   display: block;
   &:active{

src/pages/kejiji/webview/content/page/home.vue

 <template>
+<pull-to-refresh @on-pulldown='refresh'>
   <div class="page" :class="{hiding:hiding}">
     <!-- <div class="tip">{{tip}}</div> -->
     <section class="today-news">
@@ -72,13 +73,14 @@
       </div>
     </div>  
   </div>
+</pull-to-refresh>
 </template>
 
 <script>
 import { get, post } from "@js/request";
 import { getUrlParameter, isWeChatApplet, formatUrl, getEllipsisText } from "@js/tooler";
 import { shareConfig, updateLink } from "@js/share";
-
+import PullToRefresh from '../../components/pull-to-refresh'
 
 // const SCID = getUrlParameter('scid');
 const urlParam = getParam();
@@ -139,7 +141,13 @@ export default {
       default: false
     },
   },
+  components: {
+    PullToRefresh
+  },
   methods: {
+    refresh(){
+      console.log("刷新");
+    },
     getText(str, size){
       return getEllipsisText(str, size);
     },
@@ -176,7 +184,9 @@ export default {
             title: this.title,
             src: this.src
           };
-          if(step) params.shareGuide = true;
+          if(step){
+            params.shareGuide = true;
+          }
 
           let url = formatUrl('/pages/news/news_today/main', params);
 
@@ -299,7 +309,6 @@ export default {
       let res = await get(API.getScId, params);
       if (res.success) {
         let id = res.data;
-
         let url = formatUrl('/pages/activity/link/main', {
           scid: id,
           img: obj.previewImageUrl,