diff --git a/examples/docs/resources/mobile/app/multi-select/basic-usage.vue b/examples/docs/resources/mobile/app/multi-select/basic-usage.vue
index 1e009246a..97880e8ba 100644
--- a/examples/docs/resources/mobile/app/multi-select/basic-usage.vue
+++ b/examples/docs/resources/mobile/app/multi-select/basic-usage.vue
@@ -245,5 +245,4 @@ export default {
 .page__content {
   width: 375px;
   height: 48px;
-  background-color: #fff;
 }</style>
diff --git a/examples/docs/resources/mobile/app/tabs/tabs-events.vue b/examples/docs/resources/mobile/app/tabs/tabs-events.vue
index 8291acf41..d7f7f36b7 100644
--- a/examples/docs/resources/mobile/app/tabs/tabs-events.vue
+++ b/examples/docs/resources/mobile/app/tabs/tabs-events.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-tabs style="height: 150px" v-model="activeName1" tab-style="card" :with-close="true" :with-add="true" @add="add" @close="close">
+    <tiny-tabs style="height: 150px" v-model="activeName1" tab-style="card" :with-close="true" :with-add="true" @add="add" @close="close" @click="tabsEvent">
       <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
         {{ item.content }}
       </tiny-tab-item>
@@ -76,6 +76,9 @@ export default {
         }
       })
       this.Tabs.splice(index, 1)
+    },
+    tabsEvent(tabs) {
+      console.log(tabs)
     }
   }
 }
diff --git a/packages/renderless/src/multi-select/index.ts b/packages/renderless/src/multi-select/index.ts
index 5d63602f7..fe21d5f6d 100644
--- a/packages/renderless/src/multi-select/index.ts
+++ b/packages/renderless/src/multi-select/index.ts
@@ -193,11 +193,10 @@ export const getLabelsStyle = (state) => {
   // 不超过总宽度25%的头部下拉项
   let widthInfo = over25Labels
   const len = state.dataSource.length
-  if (len >= 4) {
-    return getStyleConfig(state.labelLevelsInfo, { width: `${((1 / len) * 100).toFixed(2)}%` })
-  }
-  if (!widthInfo.length || widthInfo.length === state.labelLevelsInfo.length) {
-    // 所有下拉项同时不超过或者超过25%宽度
+
+  if (!widthInfo.length || widthInfo.length === state.labelLevelsInfo.length || len >= 4) {
+
+    // 所有下拉项同时不超过或者超过25%宽度或者列数大于等于4
     return getStyleConfig(state.labelLevelsInfo, { maxWidth: `${((1 / len) * 100).toFixed(2)}%` })
   }
   let fillArr
diff --git a/packages/renderless/src/multi-select/vue.ts b/packages/renderless/src/multi-select/vue.ts
index 7a7c29835..98f48359c 100644
--- a/packages/renderless/src/multi-select/vue.ts
+++ b/packages/renderless/src/multi-select/vue.ts
@@ -31,7 +31,7 @@ export const api = [
   'loadDefault'
 ]
 
-const initState = (reactive) => {
+const initState = ({ computed, reactive }) => {
   const state = reactive({
     dataSource: [],
     wheelData: [],
@@ -44,6 +44,7 @@ const initState = (reactive) => {
     headerInfo: [],
     defaultSelectedIndexs: [],
     defaultSelectedArray: [],
+    isActive: computed(() => state.headerInfo.some(item => item.isUP))
   })
 
   return state
@@ -77,9 +78,9 @@ const initWatch = ({ watch, props, state, refs, nextTick }) => {
   )
 }
 
-export const renderless = (props, { onMounted, reactive, watch }, { emit, nextTick, refs }) => {
+export const renderless = (props, { computed, onMounted, reactive, watch }, { emit, nextTick, refs }) => {
   const api = {}
-  const state = initState(reactive)
+  const state = initState({ computed, reactive })
 
   initApi({ api, props, state, emit, nextTick, refs })
 
diff --git a/packages/renderless/src/pull-refresh/index.ts b/packages/renderless/src/pull-refresh/index.ts
index bb35738ab..1731db186 100644
--- a/packages/renderless/src/pull-refresh/index.ts
+++ b/packages/renderless/src/pull-refresh/index.ts
@@ -28,19 +28,21 @@ export const initPullRefresh = ({ t, props, state }) => () => {
     paddingTop: state.pullDown.headHeight + 'px',
     paddingBottom: state.pullUp.footHeight + 'px'
   }
-  state.loosingText = props.loosingText ?? t('ui.pullRefresh.loosing')
-  state.successText = props.successText ?? t('ui.pullRefresh.success')
-  state.failedText = props.failedText ?? t('ui.pullRefresh.failed')
 }
 
 export const onTouchstart = (state) => (event) => {
   state.draggposition = event.touches[0].clientY
 }
 
-export const onTouchmove = ({ props, state }) => (event) => {
+export const onTouchmove = ({ props, state, refs }) => (event) => {
   if (event.touches[0].clientY < state.draggposition) {
+    // 在滚动条在底部10px内时，才触发上拉刷新，防止频繁触发
+    const scrollBottom = refs.content.scrollHeight - refs.content.clientHeight - refs.content.scrollTop
+    if (scrollBottom > 10) {
+      return
+    }
     // 上拉刷新
-    if (!state.pullUp.pullUpDisabled) {
+    if (!state.pullUp.pullUpDisabled && state.pullUp.handler) {
       // 没有更多了
       if (props.hasMore) {
         state.translate3d = (event.touches[0].clientY - state.draggposition) / 2
@@ -49,8 +51,12 @@ export const onTouchmove = ({ props, state }) => (event) => {
       }
     }
   } else {
+    // 在滚动条在顶部10px内时，才触发下拉刷新，防止频繁触发
+    if (refs.content.scrollTop > 10) {
+      return
+    }
     // 下拉刷新
-    if (!state.pullDown.pullDownDisabled) {
+    if (!state.pullDown.pullDownDisabled && state.pullDown.handler) {
       state.translate3d = (event.touches[0].clientY - state.draggposition) / 2
       state.pullDownReplaces = Math.abs(state.translate3d) > state.pullDown.headHeight ? state.loosingText : state.pullDown.pullingDownText
       state.pullUpReplaces = ''
diff --git a/packages/renderless/src/pull-refresh/vue.ts b/packages/renderless/src/pull-refresh/vue.ts
index 638bb3b67..26822a123 100644
--- a/packages/renderless/src/pull-refresh/vue.ts
+++ b/packages/renderless/src/pull-refresh/vue.ts
@@ -14,7 +14,7 @@ import { mountedHandler, beforeUnmountHandler, handlerModelValue, onTouchstart,
 
 export const api = ['state']
 
-export const renderless = (props, { watch, onMounted, reactive, onBeforeUnmount }, { t, refs }) => {
+export const renderless = (props, { watch, onMounted, computed, reactive, onBeforeUnmount }, { t, refs }) => {
   const api = {}
   const state = reactive({
     pullUpReplaces: '',
@@ -24,10 +24,10 @@ export const renderless = (props, { watch, onMounted, reactive, onBeforeUnmount
     draggposition: 0,
     pullUpLoading: false,
     pullDownLoading: false,
-    loosingText: '',
-    successText: '',
-    failedText: '',
-    noMoreText: '',
+    loosingText: computed(() => props.loosingText || t('ui.pullRefresh.loosing')),
+    successText: computed(() => props.successText || t('ui.pullRefresh.success')),
+    failedText: computed(() => props.failedText || t('ui.pullRefresh.failed')),
+    noMoreText: computed(() => !props.hasMore ? t('ui.pullRefresh.noMore') : ''),
     pullUp: null,
     pullDown: null,
     successDuration: props.successDuration,
@@ -37,7 +37,7 @@ export const renderless = (props, { watch, onMounted, reactive, onBeforeUnmount
   Object.assign(api, {
     state,
     onTouchstart: onTouchstart(state),
-    onTouchmove: onTouchmove({ props, state }),
+    onTouchmove: onTouchmove({ props, state, refs }),
     onTouchend: onTouchend({ api, props, state }),
     mountedHandler: mountedHandler({ api, refs }),
     beforeUnmountHandler: beforeUnmountHandler({ api, refs }),
@@ -50,8 +50,8 @@ export const renderless = (props, { watch, onMounted, reactive, onBeforeUnmount
     () => props.hasMore,
     (value) => {
       if (!value) {
+        state.pullUpLoading = false
         // 没有更多了
-        state.noMoreText = t('ui.pullRefresh.noMore')
         api.clearPullRefresh()
       }
     },
diff --git a/packages/renderless/src/tabs/index.ts b/packages/renderless/src/tabs/index.ts
index 10d483ad4..8705af154 100644
--- a/packages/renderless/src/tabs/index.ts
+++ b/packages/renderless/src/tabs/index.ts
@@ -92,6 +92,7 @@ export const handleTabClick = ({ api, emit, props, refs }) => (pane, tabName, ev
     return
   }
 
+  event.stopPropagation()
   api.setCurrentName(tabName)
 
   emit('click', pane, event)
diff --git a/packages/theme-mobile/src/form-item/index.js b/packages/theme-mobile/src/form-item/index.js
index eded17601..846273110 100644
--- a/packages/theme-mobile/src/form-item/index.js
+++ b/packages/theme-mobile/src/form-item/index.js
@@ -4,7 +4,6 @@ export default {
   'tiny-form-item-mini-line-height': '24px',
   'tiny-form-item-label-line-height': '30px',
   'tiny-form-item-label-font-size': '14px',
-  'tiny-form-item-label-color': '#333',
   'tiny-form-item-error-color': '#f5222d',
   'tiny-form-item-error-font-size': '12px'
 }
diff --git a/packages/theme-mobile/src/form-item/index.less b/packages/theme-mobile/src/form-item/index.less
index 9e55c33cf..29ab63aa7 100644
--- a/packages/theme-mobile/src/form-item/index.less
+++ b/packages/theme-mobile/src/form-item/index.less
@@ -20,9 +20,10 @@
 @textarea-prefix-cls: ~'@{css-prefix}mobile-textarea';
 @button-prefix-cls: ~'@{css-prefix}mobile-button';
 @numeric-prefix-cls: ~'@{css-prefix}mobile-numeric';
+@input-form-prefix-cls: ~'@{css-prefix}mobile-input-form';
 
 .@{form-item-prefix-cls} {
-  margin-bottom: 12px;
+  margin-bottom: 0px;
   .clearfix();
 
   & & {
@@ -70,21 +71,65 @@
     text-align: right;
     vertical-align: middle;
     float: left;
-    font-size: 16px;
-    color: var(--ti-form-item-label-color, #333);
+    font-size: 14px;
+    color: var(--ti-mobile-base-color-common-2, #191919);
     line-height: 48px;
     padding-right: 8px;
     box-sizing: border-box;
   }
 
+  &__label.is-readonly{
+    color: var(--ti-mobile-base-color-common-6, #999999);
+    padding: 4px 0px; 
+    line-height: 14px;
+    min-height: 14px
+  }
+
   &__value {
     float: right;
+    font-size: 14px;
+    color: var(--ti-mobile-base-color-common-5, #595959); 
 
     .tiny-mobile-input-form__input{
       text-align: left;
+      font-size: 14px;
+      color: var(--ti-mobile-base-color-common-5, #595959); 
+    }
+
+    .tiny-mobile-textarea__inner{
+      line-height: 22px;
+      height: auto;
+      font-size: 14px;
     }
   }
 
+  &__value.is-readonly{
+    color: var(--ti-mobile-base-color-common-2, #191919);
+    
+    .tiny-mobile-input-form__input{
+      height: 22px;
+      line-height: 22px;
+    }
+
+    .tiny-mobile-textarea{
+      padding: 0px 16px;
+    }
+
+    input,textarea {
+      &.readonly,
+      &[readonly] {
+        color: var(--ti-mobile-base-color-common-2, #191919);
+      }
+    }
+    
+  }
+
+  .is-readonly {
+    .@{input-form-prefix-cls} {
+      height: 22px;
+    }
+  }
+  
   &__content {
     line-height: 48px;
     position: relative;
@@ -178,6 +223,14 @@
   }
 }
 
+.@{form-item-prefix-cls}:last-child{
+  margin-bottom: 0px;
+}
+
+.@{form-item-prefix-cls}.is-readonly{
+  margin-bottom: 12px;
+}
+
 .@{css-prefix} {
   &mobile-zoom-in-top-enter-active,
   &mobile-zoom-in-top-leave-active {
diff --git a/packages/theme-mobile/src/form-item/vars.less b/packages/theme-mobile/src/form-item/vars.less
index 3ac7b1d3e..28ea7fb7f 100644
--- a/packages/theme-mobile/src/form-item/vars.less
+++ b/packages/theme-mobile/src/form-item/vars.less
@@ -4,7 +4,6 @@
   --ti-form-item-mini-line-height: 24px;
   --ti-form-item-label-line-height: var(--ti-mobile-base-size-height-minor, 30px);
   --ti-form-item-label-font-size: 14px;
-  --ti-form-item-label-color: var(--ti-mobile-base-color-info-normal, #333);
   --ti-form-item-error-color: var(--ti-mobile-base-color-danger-normal, #f5222d);
   --ti-form-item-error-font-size: var(--ti-mobile-base-font-size, 12px);
 }
diff --git a/packages/theme-mobile/src/form/index.less b/packages/theme-mobile/src/form/index.less
index 54ddef67c..c376a7993 100644
--- a/packages/theme-mobile/src/form/index.less
+++ b/packages/theme-mobile/src/form/index.less
@@ -20,6 +20,8 @@
 .@{form-prefix-cls} {
   width: 100%;
   overflow: hidden;
+  padding: 12px;
+  background: #fff;
 
   div {
     outline: none;
@@ -27,14 +29,13 @@
 
   .@{form-item-prefix-cls} {
     position: relative;
-    margin-bottom: 0;
   }
 
   .@{form-item-prefix-cls}__label {
     width: 35%;
     min-height: 48px;
     line-height: 1.4;
-    font-size: 16px;
+    font-size: 14px;
     display: flex;
     z-index: 1;
     padding: 13px 0px;
@@ -80,6 +81,14 @@
       line-height: 1;
     }
 
+    .@{form-item-prefix-cls}__label.is-readonly{
+      margin-bottom: 6px;
+    }
+
+    .@{form-item-prefix-cls}__value .tiny-mobile-textarea{
+      padding: 0px 16px;
+    }
+
     .@{form-item-prefix-cls}__value {
       width: 100%;
     }
diff --git a/packages/theme-mobile/src/multi-select/index.js b/packages/theme-mobile/src/multi-select/index.js
index 9309d124a..994f43e92 100644
--- a/packages/theme-mobile/src/multi-select/index.js
+++ b/packages/theme-mobile/src/multi-select/index.js
@@ -1,8 +1,8 @@
 export default {
-  'tiny-mobile-multi-select-bg': '#fff',
-  'tiny-mobile-multi-select-header-bg': '#fff',
+  'tiny-mobile-multi-select-bg-active': '#fff',
   'tiny-mobile-multi-select-header-item-height': '28px',
-  'tiny-mobile-multi-select-header-item-bg': 'rgba(0, 0, 0, 0.03)',
+  'tiny-mobile-multi-select-header-item-bg': '#ededed',
+  'tiny-mobile-multi-select-header-item-bg-selected': '#f1f5ff',
   'tiny-mobile-multi-select-header-item-margin-top': '10px',
   'tiny-mobile-multi-select-header-label-text-color': '#595959',
   'tiny-mobile-multi-select-header-label-font-size': '12px',
diff --git a/packages/theme-mobile/src/multi-select/index.less b/packages/theme-mobile/src/multi-select/index.less
index bafccd1f0..eb8375db7 100644
--- a/packages/theme-mobile/src/multi-select/index.less
+++ b/packages/theme-mobile/src/multi-select/index.less
@@ -17,9 +17,12 @@
 @multi-select-prefix-cls: ~'@{css-prefix}mobile-multi-select';
 
 .@{multi-select-prefix-cls} {
-  background: var(--ti-mobile-multi-select-bg, #fff);
   width: 100%;
-  border-radius: 0px 0px 16px 16px;
+  position: relative;
+
+  &__active {
+    background: var(--ti-mobile-multi-select-bg-active, #fff);
+  }
 
   &__header {
     display: flex;
@@ -34,7 +37,6 @@
       flex: 1;
       flex-direction: row;
       justify-content: space-between;
-      background: var(--ti-mobile-multi-select-header-bg, #fff);
       box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.06) inset;
     }
 
@@ -55,7 +57,7 @@
       align-items: center;
       justify-content: center;
       height: var(--ti-mobile-multi-select-header-item-height, 28px);
-      background: var(--ti-mobile-multi-select-header-item-bg, rgba(0, 0, 0, 0.03));
+      background: var(--ti-mobile-multi-select-header-item-bg, #ededed);
       border-radius: 4px;
       margin-top: var(--ti-mobile-multi-select-header-item-margin-top, 10px);
       padding: 5px 8px;
@@ -98,17 +100,28 @@
       }
     }
 
-    &__active {
+    &__selected{
+      background: var(--ti-mobile-multi-select-header-item-bg-selected, #f1f5ff);
+    }
+
+    &__selected &__label{
+      color: var(--ti-mobile-base-color-brand-1, #4a79fe);
+    }
+
+    &__selected &__icon{
+
       svg {
         fill: var(--ti-mobile-base-color-brand-1, #4a79fe);
       }
-
-      color: var(--ti-mobile-base-color-brand-1, #4a79fe);
     }
   }
 
   &__content {
+    width: 100%;
     height: var(--ti-mobile-multi-select-content-height, 226px);
+    position: absolute;
+    background: #fff;
+    z-index: 500;
   }
 
   .noFooter {
@@ -125,6 +138,10 @@
     align-items: center;
     border-radius: 0px 0px 16px 16px;
     box-shadow: 0px -1px 3px 0px #f8f8f8;
+    background: #fff;
+    z-index: 500;
+    position: absolute;
+    margin-top: 226px;
 
     button {
       width: var(--ti-mobile-multi-select-footer-width, 164px);
diff --git a/packages/theme-mobile/src/multi-select/vars.less b/packages/theme-mobile/src/multi-select/vars.less
index a6dfcf0dc..da2b4d199 100644
--- a/packages/theme-mobile/src/multi-select/vars.less
+++ b/packages/theme-mobile/src/multi-select/vars.less
@@ -1,8 +1,8 @@
 :root {
-  --ti-mobile-multi-select-bg: #fff;
-  --ti-mobile-multi-select-header-bg: #fff;
+  --ti-mobile-multi-select-bg-active: #fff;
   --ti-mobile-multi-select-header-item-height: 28px;
-  --ti-mobile-multi-select-header-item-bg: rgba(0, 0, 0, 0.03);
+  --ti-mobile-multi-select-header-item-bg: #ededed;
+  --ti-mobile-multi-select-header-item-bg-selected: #f1f5ff;
   --ti-mobile-multi-select-header-item-margin-top: 10px;
   --ti-mobile-multi-select-header-label-text-color: #595959;
   --ti-mobile-multi-select-header-label-font-size: 12px;
diff --git a/packages/theme-mobile/src/tabs/index.less b/packages/theme-mobile/src/tabs/index.less
index 389d4a87c..ee60361ca 100644
--- a/packages/theme-mobile/src/tabs/index.less
+++ b/packages/theme-mobile/src/tabs/index.less
@@ -31,7 +31,6 @@
     font-size: var(--ti-mobile-tabs-font-size, 14px);
     color: var(--ti-mobile-tabs-text-color, #333);
     background: var(--ti-mobile-tabs-bg-color, #fff);
-    padding: 15px 24px;
   }
 
   &__new-tab {
diff --git a/packages/vue/src/form-item/src/index.vue b/packages/vue/src/form-item/src/index.vue
index 3de683552..2e4033069 100644
--- a/packages/vue/src/form-item/src/index.vue
+++ b/packages/vue/src/form-item/src/index.vue
@@ -91,6 +91,13 @@ export default defineComponent({
     const formItemClass = `${classPrefix}form-item--${state.sizeClass ? state.sizeClass : ''}`
     const isShowError = state.validateState === 'error' && showMessage && state.form.showMessage
     const isErrorInline = typeof inlineMessage === 'boolean' ? inlineMessage : (state.formInstance && state.formInstance.inlineMessage) || false
+    
+    // 设置只读下label的样式
+    const isReadonly =  defaultSlots.some((vnode) => {
+      const props = parseVnode(vnode)?.props
+      return props && (props['readonly'] === '' || props['readonly'])
+    })
+
     let validateMessage = null
 
     const FormContent = defaultSlots
@@ -161,7 +168,10 @@ export default defineComponent({
           return h(
             'div',
             {
-              class: `${classPrefix}form-item__value`,
+              class: {
+                [`${classPrefix}form-item__value`]: true,
+                'is-readonly': isMobile && props && (props['readonly'] === '' || props['readonly'])
+              },
               style: state.valueStyle
             },
             [item]
@@ -227,7 +237,8 @@ export default defineComponent({
             {
               class: {
                 [`${classPrefix}form-item__label`]: true,
-                'is-ellipsis': isMobile && ellipsis
+                'is-ellipsis': isMobile && ellipsis,
+                'is-readonly': isMobile && isReadonly
               },
               style: state.labelStyle,
               attrs: {
@@ -250,7 +261,8 @@ export default defineComponent({
           'is-success': state.validateState === 'success',
           'is-required': state.isRequired || required,
           'is-no-asterisk': state.formInstance && state.formInstance.hideRequiredAsterisk,
-          [formItemClass]: true
+          [formItemClass]: true,
+          'is-readonly': isMobile && isReadonly
         }
       },
       [
diff --git a/packages/vue/src/multi-select/src/mobile.vue b/packages/vue/src/multi-select/src/mobile.vue
index 248368429..56ec001ac 100644
--- a/packages/vue/src/multi-select/src/mobile.vue
+++ b/packages/vue/src/multi-select/src/mobile.vue
@@ -10,18 +10,23 @@
  *
  -->
 <template>
-  <div class="tiny-mobile-multi-select">
+  <div :class="['tiny-mobile-multi-select', state.isActive ? 'tiny-mobile-multi-select__active' : '']">
     <div class="tiny-mobile-multi-select__header">
       <div class="tiny-mobile-multi-select__header__flexCenter" ref="headerBox">
         <!-- 用来计算头部每项宽度 -->
         <div class="tiny-mobile-multi-select__header__calc">
-          <div v-for="(item, index) of dataSource" :key="index" class="tiny-mobile-multi-select__header__item" ref="label">
-            <div :class="['tiny-mobile-multi-select__header__label', state.headerInfo[index]?.isSelected ? 'tiny-mobile-multi-select__header__active' : '']">
+          <div 
+            v-for="(item, index) of dataSource" 
+            :key="index" 
+            :class="['tiny-mobile-multi-select__header__item', state.headerInfo[index]?.isSelected ? 'tiny-mobile-multi-select__header__selected' : '']" 
+            ref="label"
+          >
+            <div class="tiny-mobile-multi-select__header__label">
               <span v-if="!state.headerInfo[index]?.isSelected">{{ item.title }}</span>
               <span v-else>{{ state.headerInfo[index]?.title }}</span>
             </div>
             <div
-              :class="['tiny-mobile-multi-select__header__icon', state.headerInfo[index]?.isSelected ? 'tiny-mobile-multi-select__header__active' : '']"
+              class="tiny-mobile-multi-select__header__icon"
               :style="{
                 transform: state.headerInfo[index]?.isUP ? 'rotate(180deg)' : 'none'
               }"
@@ -33,16 +38,16 @@
         <div
           v-for="(item, index) of dataSource"
           :key="index"
-          class="tiny-mobile-multi-select__header__item"
+          :class="['tiny-mobile-multi-select__header__item', state.headerInfo[index]?.isSelected ? 'tiny-mobile-multi-select__header__selected' : '']"
           @click="handleClick(index)"
           :style="state.labelsStyle[index]"
         >
-          <div :class="['tiny-mobile-multi-select__header__label', state.headerInfo[index]?.isSelected ? 'tiny-mobile-multi-select__header__active' : '']">
+          <div class="tiny-mobile-multi-select__header__label">
             <span v-if="!state.headerInfo[index]?.isSelected">{{ item.title }}</span>
             <span v-else>{{ state.headerInfo[index]?.title }}</span>
           </div>
           <div
-            :class="['tiny-mobile-multi-select__header__icon', state.headerInfo[index]?.isSelected ? 'tiny-mobile-multi-select__header__active' : '']"
+            class="tiny-mobile-multi-select__header__icon"
             :style="{
               transform: state.headerInfo[index]?.isUP ? 'rotate(180deg)' : 'none'
             }"
diff --git a/packages/vue/src/pull-refresh/src/index.vue b/packages/vue/src/pull-refresh/src/index.vue
index c2f2bc626..5a808a9d7 100644
--- a/packages/vue/src/pull-refresh/src/index.vue
+++ b/packages/vue/src/pull-refresh/src/index.vue
@@ -11,11 +11,19 @@
  -->
 <template>
   <div class="tiny-mobile-pull-refresh" :style="state.refreshStyle">
-    <div class="tiny-mobile-pull-refresh__track" ref="track" :style="{
-      'transition-duration': state.animationDuration + 'ms',
-      transform: 'translate3d(0px,' + state.translate3d + 'px,0px)'
-    }">
-      <div class="tiny-mobile-pull-refresh__tips tiny-mobile-pull-refresh__head" :style="{ height: state.pullDown.headHeight + 'px' }" v-if="state.pullDownLoading || state.pullDownReplaces">
+    <div
+      class="tiny-mobile-pull-refresh__track"
+      ref="track"
+      :style="{
+        'transition-duration': state.animationDuration + 'ms',
+        transform: 'translate3d(0px,' + state.translate3d + 'px,0px)'
+      }"
+    >
+      <div
+        class="tiny-mobile-pull-refresh__tips tiny-mobile-pull-refresh__head"
+        :style="{ height: state.pullDown.headHeight + 'px' }"
+        v-if="state.pullDownLoading || state.pullDownReplaces"
+      >
         <span v-if="!state.pullDownLoading">{{ state.pullDownReplaces }}</span>
         <slot name="loading" v-if="state.pullDownLoading">
           <ul v-if="state.pullDownLoading" class="tiny-mobile-pull-refresh__loading">
@@ -25,10 +33,14 @@
           </ul>
         </slot>
       </div>
-      <div class="tiny-mobile-pull-refresh__content">
+      <div class="tiny-mobile-pull-refresh__content" ref="content">
         <slot></slot>
       </div>
-      <div class="tiny-mobile-pull-refresh__tips tiny-mobile-pull-refresh__foot" :style="{ height: state.pullUp.footHeight + 'px' }" v-if="state.pullUpLoading || state.pullUpReplaces">
+      <div
+        class="tiny-mobile-pull-refresh__tips tiny-mobile-pull-refresh__foot"
+        :style="{ height: state.pullUp.footHeight + 'px' }"
+        v-if="state.pullUpLoading || state.pullUpReplaces"
+      >
         <span v-if="!state.pullUpLoading">{{ state.pullUpReplaces }}</span>
         <slot name="loading" v-if="state.pullUpLoading">
           <ul v-if="state.pullUpLoading" class="tiny-mobile-pull-refresh__loading">
@@ -75,7 +87,7 @@ export default defineComponent({
     hasMore: {
       type: Boolean,
       default: true
-    },
+    }
   },
   setup(props, context) {
     return setup({ props, context, renderless, api, mono: true })