微信小程序 要求：底部上劃到一定位置 停止，我用的是hbuildX插件實(shí)現(xiàn)，插件比較簡(jiǎn)單，具體使用往下看

實(shí)現(xiàn)效果：https://download.csdn.net/download/YaRuu/87600627?spm=1001.2014.3001.5501

插件地址：https://ext.dcloud.net.cn/plugin?id=7921

插件下載到hbuildX里的需要的項(xiàng)目里，就可以直接用了

代碼實(shí)現(xiàn)：文章來源地址http://www.zghlxwxcb.cn/news/detail-673790.html

<ww-bottom-drawerapp ref="drag" :proportionShow='proportionvc' :dragHandleHeight="handleHeight"
                           :isExpand="mExpand"
                           @callExpand="onCallExpand" :canDrag="canDarg()" :dragLength="dragLength"
                           :transitionTime='transitionTime' :menuHeight='menuHeight'>
        <view class="nav">
          <!-- 選項(xiàng)卡水平方向滑動(dòng)，scroll-with-animation是滑動(dòng)到下一個(gè)選項(xiàng)時(shí)，有一個(gè)延時(shí)效果 -->
          <scroll-view class="tab-scroll"  scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
            <view class="tab-scroll_box">
              <!-- 選項(xiàng)卡類別列表 -->
              <view class="tab-scroll_item" v-for=" (item,index) in optionsTabs" :key="index" @click="chenked(index)">
                <view class="cont-top" @click="getTabbar(item)" v-if="!(isTabs.key === item.key)">
                  <img class="cont-top-img" :src="getImg(item.iconPath+'.png')" alt="">
                  {{ item.value }}
                </view>
                <view class="cont-topS" @click="getTabbar(item)" v-else>
                  <img class="cont-top-img" :src="getImg(item.iconPath+'S.png')" alt="">
                  {{ item.value }}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <slot>
          <!-- 填充內(nèi)容 -->
          <scroll-view :scroll-top="scrollTop" scroll-y="true"
                       :style="'width: 100%;height :'+  (menuHeight + 'px')  "
                        @scroll="scroll">
            <uni-grid :column="4" :highlight="false" :showBorder="false" v-if="isTabs.key==='景點(diǎn)'">
              <uni-grid-item  v-for="(item, index) in list"
                             :key="index"
                              :index="index">
                <view class="popup-bot">
? ? ? ? ? ? ? ? ? ? <!--循環(huán)列表-->
                      <view>{{item}}</view>
                </view>
              </uni-grid-item>
            </uni-grid>
          </scroll-view>
        </slot>
      </ww-bottom-drawerapp>

data(){
? ?return{
      proportionvc: 0.4, //抽屜初始顯示的位置，內(nèi)容的百分比
      handleHeight: 20, //抽屜頂部邊框高度，可以設(shè)置0，隱藏
      mExpand: false,
      dragLength: 100,
      transitionTime: 0.3,
      menuHeight: 450,//計(jì)算預(yù)設(shè)菜單的高度 px
      scrollTop: 0, //支付寶使用
      mscrollTop: 0, 
? ?}
},
 methods: {
    //nvue對(duì)top動(dòng)畫支持不夠，使用css的其他的動(dòng)畫轉(zhuǎn)換
    styleCss() {
      if (this.mExpand) {
        return this.targetCss();//'width: calc(50%);'
      } else {
        return this.originCss();//`width: calc(100% - 20px);`
      }
    },
    targetCss() {
      return "transform: translateY(100%);transition-property: transform;transition-duration: 1s;"
    },
    originCss() {
      return "transform: translateY(0px);transition-property: transform;transition-duration: 1s;"
    },
    canDarg() {
      // #ifdef MP-ALIPAY
      return this.mscrollTop < 30
      // #endif
      return true
    },
    scroll: function (e) {
      this.mscrollTop = e.detail.scrollTop
    },
    onCallExpand(e) { //展開搜索的回調(diào)監(jiān)聽
      this.mExpand = e.value
    },
}