1. 小程序滚动穿透问题

1.1. page-meta 组件

页面属性配置节点,用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。

https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html

1.2. uni-app 代码示例

isShowStoreShare 是控制弹窗显示隐藏的变量

page-meta 设置 page 样式:overflow: hidden

<template>
  <page-meta :page-style="`overflow: ${isShowStoreShare ? 'hidden' : 'visible'}`">
    <section :class="['manage-car', { 'manage-car--over-flow-hide': isSearchModelShow, 'manage-car--no-auth': !hasManageAuth }]">
      <navigate title="卖车" :showMenu="false" />
      <section class="manage-car__search-bar" v-if="hasManageAuth">
        <car-search-input
          placeholder="输入车牌号或车系"
          :result-list="searchResultList"
          :maxlength="10"
          :fuzzy="fuzzy"
          :top-diff="topDiff"
          :value.sync="searchValue"
          :is-loading="isSearchLoading"
          :is-load-all="!hasMoreData"
          :isMaskShow.sync="isSearchModelShow"
          @input="handleSearchInput"
          @confirm="handleSearchConfirm"
          @cancel="handleCancel"
          @load-more="handleLoadMore"
          @result-select="handleResultClick"
          @model-select="handleModelSelect">
        </car-search-input>
      </section>

      <new-add
        text="新增车辆"
        :hasAuth="hasAddCarAuth"
        @handleLink="handleLink"
      ></new-add>

      <section class="manage-car__button-groups" v-if="hasManageAuth">
        <all-cars
          :currentAuctionCarCount="currentAuctionCarCount"
          :otherAuctionCarCoount="otherAuctionCarCoount"
          :hasAllCarAuth="hasAllCarAuth"
        />
        <div
          v-for="group in buttonList"
          :key="group.title">
          <button-group
            icon-size="big"
            :title="group.title"
            :button-list="group.items"
            @image-click="handleNavigate"
          />
        </div>
      </section>

      <store-share
        :visible="isShowStoreShare"
        :store-name="storeInfos.storeName"
        :address="storeInfos.fullAddress"
        :concat-number="storeInfos.contactNumber"
        :logo="storeInfos.logoLocalPath"
        :qr-code="storeInfos.QRCodeLocalPath"
        @close="handleClose"
      ></store-share>
    </section>
  </page-meta>
</template>
Copyright © tomgou 2022 all right reserved,powered by Gitbook该文章修订时间: 2023-08-28 17:33:23

results matching ""

    No results matching ""