uni-app nvue 页面 slider 编译未生效

uni-app nvue 页面 slider 编译未生效

开发环境 版本号 项目创建方式
Mac macOS Big Sur 版本11.2 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.1.4

手机系统：iOS

手机系统版本号：iOS 12.4

手机厂商：苹果

手机机型：iPhone 6

页面类型：nvue

打包方式：云端

示例代码：

<template>  
    <div>  
        <slider auto-play :interval="3000" class="slider">  
            <div style="position: relative;">  
                <image src="../../static/images/bg.jpg" class="image" resize="cover"></image>  
            </div>  
            <indicator class="indicator"></indicator>  
        </slider>  
    </div>  
</template>  

<script>  
    export default {  
        data () {  
            return {  

            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style lang="less">  
    .slider, .image {  
        width: 750px;  
        height: 300px;  
    }  
    .indicator {  
        position: absolute;  
        right: 10px;  
        bottom: 10px;  
        width: 150px;  
        height: 80px;  
        background-color: rgba(0, 0, 0, 0);  
        item-color: #333333;  
        item-select-color: rgba(255, 255, 255, 0.5);  
    }  
</style>

更多关于uni-app nvue 页面 slider 编译未生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue 页面 slider 编译未生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue页面中使用slider组件时，需要注意几个关键点：

  1. slider组件需要设置style="width:750rpx;height:300rpx"这样的内联样式，而不是通过class设置样式。nvue对CSS支持有限，建议使用内联样式。

  2. indicator组件需要作为slider的直接子元素，并且需要设置正确的样式属性：

<slider auto-play interval="3000" style="width:750rpx;height:300rpx">
    <div style="position:relative;">
        <image src="../../static/images/bg.jpg" style="width:750rpx;height:300rpx" resize="cover"></image>
    </div>
    <indicator style="position:absolute;right:10px;bottom:10px;width:150px;height:30px;item-color:#333333;item-selected-color:#ffffff;"></indicator>
</slider>
回到顶部