在uniapp 中 uni-popup 内容过多的时候 滚动不了的问题

我在用这个组件的时候,发现,限制一定的高度,如果内容太多,就会滚定不了,卡在哪里,如果不给高度,内容就会撑开满屏的状态,然后找了很多方法,也算找到了 

<template>
  <view class="container_box">
    <uni-popup ref="isMusicpopup" type="bottom">
      <view class="content_list">
        <scroll-view scroll-y="true" class="scroll_view_style">
          <view class="title_up">
            <text class="title_up_item" @click="onCurrentNumber(0)"
              :class="{'title_up_item_active':CurrentIndex==0}">景点</text>
            <text class="title_up_item" @click="onCurrentNumber(1)"
              :class="{'title_up_item_active':CurrentIndex==1}">传说</text>
            <text class="title_up_item" @click="onCurrentNumber(2)"
              :class="{'title_up_item_active':CurrentIndex==2}">珍宝馆
            </text>
          </view>
          <view class="audio_box">
            {{childAudioArray}}
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        StoryData: {},
        CurrentIndex: 0,
        childAudioArray: [], // 播放音频的数组
      }
    },
    mounted() {
      this.StoryData = uni.getStorageSync('Story')
      this.childAudioArray = this.StoryData.childAudio
      console.log('childAudioArray', this.childAudioArray)
      this.open()
    },
    methods: {
      open() {
        this.$refs.isMusicpopup.open('bottom')
      },
      close() {
        this.$refs.isMusicpopup.close()
      },
      onCurrentNumber(index) {
        this.CurrentIndex = index
      }
    }
  }
</script>

<style lang="less" scoped>
  .container_box {
    overflow-y: auto;
    border: 1rpx solid #000;
  }

  .content_list {
    background-color: #fff;

  }

  .scroll_view_style {
    height: 450px;

  }

  .title_up {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 20px;
  }

  .title_up_item {
    font-size: 16px;
    color: #999;
    margin-right: 20px;
  }

  .title_up_item_active {
    font-weight: bold;
    color: #333;
  }

  .audio_box {
    padding: 20px;
    font-size: 14px;
    overflow-y: auto;
    /* 添加滚动条 */
  }
</style>

### uni-app 中 `uni-popup` 组件的使用方法 #### 1. 引入组件 在需要使用 `uni-popup` 的页面中,可以通过以下方式引入该组件: ```html <template> <view> <!-- 页面其他内容 --> <button type="primary" @click="openPopup">打开弹窗</button> <!-- 弹出层组件 --> <uni-popup ref="popup"> <view class="popup-content"> 这是一个简单的弹出窗口。 </view> </uni-popup> </view> </template> <script> import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'; export default { components: { uniPopup }, methods: { openPopup() { this.$refs.popup.open(); // 打开弹窗 } } }; </script> ``` 此代码展示了如何通过 `<uni-popup>` 标签引入并初始化组件[^1]。 --- #### 2. 控制弹出层的行为 `uni-popup` 提供了一些内置的方法用于控制其显示状态。例如,调用 `$refs.popup.open()` 方法可以展示弹出层;而调用 `$refs.popup.close()` 则可关闭它。 以下是完整的生命周期函数支持: - **`open(type)`**: 展示弹出层,默认方向为居中 (`center`),也可以指定参数调整位置(如顶部、底部等)。 - **`close()`**: 关闭当前弹出层。 这些功能可以根据实际业务逻辑动态触发[^2]。 --- #### 3. 自定义样式与交互 如果遇到弹窗内部内容较多的情况,可能会导致无法滚动问题。此时可通过嵌套 `scroll-view` 来解决这一现象: ```html <template> <view> <button type="primary" @click="openPopup">打开带滚动条的弹窗</button> <uni-popup ref="popup"> <scroll-view scroll-y="true" style="height: 400px;"> <view v-for="(item, index) in dataList" :key="index" class="list-item"> {{ item }} </view> </scroll-view> </uni-popup> </view> </template> <script> export default { data() { return { dataList: Array.from({ length: 50 }, (_, i) => `项目 ${i + 1}`) }; }, methods: { openPopup() { this.$refs.popup.open(); } } }; </script> <style scoped> .list-item { padding: 10px; border-bottom: 1px solid #ccc; } </style> ``` 在此案例中,我们利用了 `scroll-view` 并设置属性 `scroll-y=true` 实现垂直滚动效果[^3]。 --- #### 4. 配置选项说明 除了基本操作外,还可以传递额外参数来自定义弹窗的表现形式。比如改变默认弹出的方向或者增加动画过渡时间等等。常见配置项如下表所示: | 参数名 | 类型 | 默认值 | 描述 | |--------------|----------|----------------|----------------------------------------------------------------------| | mode | String | center | 定义弹框出现的位置 (top/bottom/left/right/center),影响布局表现 | | maskClick | Boolean | true | 是否允许点击遮罩区域隐藏 | | animation | Boolean | false | 开启后会应用淡入淡出的效果 | 更多高级特性建议查阅官方文档获取最新资料[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值