uni-app slide 横屏时宽度显示不全

uni-app slide 横屏时宽度显示不全

开发环境 版本号 项目创建方式
Windows Windows 10 专业版 HBuilderX

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

HBuilderX类型：

正式

HBuilderX版本号：

4.29

手机系统：

Android

手机系统版本号：

Android 12

手机厂商：

华为

手机机型：

plxel 4

页面类型：

nvue

vue版本：

vue2

打包方式：

云端

示例代码：

<template>
<view style="display: flex;flex: 1;">
<video id='video1' class="video" :src="src1" controls="true" :danmu-list="list" codec="software"
http-cache="true" play-strategy="0" danmu-btn="false" enable-danmu="true" :loop="true" muted="true"
auto-play="true" enable-progress-gesture="false" direction="-90" show-loading="true" show-mute-btn="true"
@fullscreenchange="fullscreenchange">
<!-- 全屏时的页面展示 -->
<cover-view v-if="isFullScreen" class="cover_video">
<view style=" padding: 0rpx 50rpx 0rpx 50rpx; height: 80rpx; ">
<slider class="slide_full_view" :value="current" :max="duration" @changing="changing"
@change="change" block-size="20" activeColor="#7a7a7a" backgroundColor="#f5f5f5"
block-color="#f5f5f5" />
</view>
<view style="height: 50rpx;width: 100rpx; background-color: white; align-items: center;justify-content: center;  margin-left: 100rpx;" @click="startAdd">点击这个验证</view>
</cover-view>
</video>
</view>
</template> 

<script>
export default {  
    data() {  
        return {  
            src1: "http://www.w3school.com.cn/i/movie.mp4",  
            videoContext: uni.createVideoContext("video1", this),  
            isFullScreen: false,  
            current: 0,  
            duration: 5,  
        }  
    },  
    methods: {  
        fullscreenchange(e) {  
            // 打开 nvue 子窗体  
            console.log("fullscreenchange:" + JSON.stringify(e));  
            this.isFullScreen = e.detail.fullScreen;  
        },  
        startAdd() {  
            this.current = 0  
            this.timer = setInterval(() => {  
                if (this.current < this.duration) {  
                    this.current = this.current + 1  
                } else {  
                    clearInterval(this.timer)  
                }  
            }, 1000)  
        }  
    }  
}
</script> 

/deep/ .uni-slider-handle-wrapper {
height: 10rpx !important;
}

/deep/ .uni-slider-thumb {  
    margin-top: 4rpx;  
}  

/deep/ .uni-slider-track {  
    height: 10rpx !important;  
}  

.cover_video {  
    display: flex;  
    flex: 1;  
    justify-content: flex-end;  
}

更多关于uni-app slide 横屏时宽度显示不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

展示不全有截图吗，比提供一下单页面源码吧，是滑块很长屏幕挡住了吗
补充： 附上交流过程中测试 nvue + pages.json 设置屏幕旋转为 auto 的结果。测试nvue 并尝试添加 v-if 来测试 slider 自增的情况

更多关于uni-app slide 横屏时宽度显示不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html


可以用官网的slide页面源码。创建一个nvue的页面。nvue界面设置横屏，可以必现这个问题。

回复 2***@qq.com: 私聊沟通中

nvue页面存在问题，vue页面横屏正常。

交流中还提到了 plus api，提供一下单页面源码或者复现工程吧，说明基础的 uni-app 空项目如何复现你到问题

回复 DCloud_UNI_OttoJi: 代码已上传

回复 2***@qq.com: 在后续的交流中提供了兼容建议，在这个场景里使用 vue 组件，不使用 nvue

回复 DCloud_UNI_OttoJi: 在cover-view 中tips介绍在App端，如果重度使用video和map，推荐使用nvue页面。

在uni-app中处理横屏模式下slide组件宽度显示不全的问题，通常涉及到CSS样式的调整以及页面的适配。下面是一个具体的解决方案，包括代码示例，帮助你解决横屏显示不全的问题。

问题分析

横屏显示不全通常是因为页面布局在横屏模式下未能正确适配屏幕宽度。uni-app中的slide组件依赖于其容器宽度来设置内部内容的展示方式。如果容器宽度在横屏模式下未正确设置，则可能导致内容显示不全。

解决方案

  1. 设置页面允许横屏显示

    在pages.json中配置页面支持横屏显示。

    {
  "globalStyle": {
    "app-plus": {
      "autoBackButton": true,
      "screenOrientation": "portraitOrLandscape" // 允许横屏和竖屏
    }
  }
}

  2. 使用CSS Flexbox或Grid布局

    使用Flexbox或Grid布局可以更加灵活地控制元素在不同屏幕尺寸和方向下的表现。

    <template>
  <view class="container">
    <slide-view class="slide-container">
      <slide v-for="(item, index) in slides" :key="index">
        <view class="slide-item">{{ item }}</view>
      </slide>
    </slide-view>
  </view>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slide-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row; /* 根据需要可以改为column */
  overflow: hidden;
}

.slide-item {
  min-width: 100vw; /* 保证每个slide至少占据整个屏幕宽度 */
  height: 100vh;
  box-sizing: border-box;
  /* 其他样式 */
}
</style>

  3. 监听屏幕方向变化

    如果需要更复杂的处理，比如根据屏幕方向动态调整布局，可以使用onOrientationChange事件。

    export default {
  onOrientationChange(orientation) {
    if (orientation === 'landscape') {
      // 横屏时执行的操作，例如调整样式
      this.$refs.slideContainer.style.flexDirection = 'row';
    } else {
      // 竖屏时执行的操作
      this.$refs.slideContainer.style.flexDirection = 'column';
    }
  }
}

    注意：onOrientationChange事件需要在页面或组件中正确监听并处理。

通过以上步骤，你应该能够解决uni-app中slide组件在横屏模式下宽度显示不全的问题。如果问题依然存在，可能需要进一步检查具体的样式和布局设置，或者考虑使用其他布局技术。

回到顶部