uniapp-vue-微信小程序可拖动底部抽屉-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp-vue-微信小程序可拖动底部抽屉。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序要求：底部上划到一定位置停止，我用的是hbuildX插件实现，插件比较简单，具体使用往下看

实现效果：https://download.csdn.net/download/YaRuu/87600627?spm=1001.2014.3001.5501

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

插件下载到hbuildX里的需要的项目里，就可以直接用了

uniapp抽屉组件,微信小程序,vue.js,uni-app,Powered by 金山文档

代码实现：文章来源地址https://www.toymoban.com/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">
          <!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
          <scroll-view class="tab-scroll"  scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
            <view class="tab-scroll_box">
              <!-- 选项卡类别列表 -->
              <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>
          <!-- 填充内容 -->
          <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==='景点'">
              <uni-grid-item  v-for="(item, index) in list"
                             :key="index"
                              :index="index">
                <view class="popup-bot">
                    <!--循环列表-->
                      <view>{{item}}</view>
                </view>
              </uni-grid-item>
            </uni-grid>
          </scroll-view>
        </slot>
      </ww-bottom-drawerapp>

data(){
   return{
      proportionvc: 0.4, //抽屉初始显示的位置，内容的百分比
      handleHeight: 20, //抽屉顶部边框高度，可以设置0，隐藏
      mExpand: false,
      dragLength: 100,
      transitionTime: 0.3,
      menuHeight: 450,//计算预设菜单的高度 px
      scrollTop: 0, //支付宝使用
      mscrollTop: 0, 
   }
},
 methods: {
    //nvue对top动画支持不够，使用css的其他的动画转换
    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) { //展开搜索的回调监听
      this.mExpand = e.value
    },
}