> 웹 프론트엔드 > uni-app > uniapp에서 홈페이지 슬라이드쇼를 만드는 방법

uniapp에서 홈페이지 슬라이드쇼를 만드는 방법

coldplay.xixi
풀어 주다: 2020-12-17 10:23:07
원래의
3964명이 탐색했습니다.

uniapp에서 홈페이지 슬라이드쇼를 만드는 방법: 먼저 구성 파일을 수정한 다음 홈페이지 코드를 작성하고 코드는 []이며 마지막으로 CSS 코드를 완성합니다. 그것을 실행하십시오.

uniapp에서 홈페이지 슬라이드쇼를 만드는 방법

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천(무료): uni-app 개발 튜토리얼

uniapp으로 홈페이지 슬라이드쇼 만드는 방법:

1. 구성 파일을 수정하세요

먼저 생성된 프로젝트 루트 디렉토리 아래에 페이지가 필요합니다. 이전 구성 파일(pages.json)에서 네비게이션 바 배경을 검은색으로, 헤더 글꼴 색상을 흰색으로 설정합니다.

구성이 완료되면 코드는 다음과 같습니다.

{
"pages": [ //pages数组中第一项表示应用启动页,
{
"path": "pages/index/index",//首页文件路径
"style": {
"navigationBarTitleText": "首页"//首页头部标题
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",//导航栏标题颜色(仅支持 black/white)
"navigationBarTitleText": "WPApp",//导航栏默认标题
"navigationBarBackgroundColor": "#000000;",//导航栏背景颜色,此处为黑色
"backgroundColor": "#F8F8F8"//页面背景颜色
}
}
로그인 후 복사

2. 홈페이지 코드를 작성합니다

여기에서 공식 uni-app 구성 요소를 사용해야 합니다. 링크를 클릭하면 특정 사용 방법을 볼 수 있습니다. 그런 다음 페이지>index>index.vue 디렉토리를 차례로 열면 index.vue에 프로젝트를 생성할 때 이미 코드의 일부가 있습니다. 쓸모가 없으므로 먼저 원본 코드를 삭제한 다음 아래와 같이

uniapp에서 홈페이지 슬라이드쇼를 만드는 방법

기존 코드를 삭제한 후 원하는 코드를 작성하기 시작합니다. 홈페이지이므로 여기에 슬라이드쇼 코드 작성을 시작합니다.

uni-app의 페이지는 템플릿 코드(뷰), js 코드(데이터, 상호 작용), CSS 코드(뷰 스타일)의 세 부분으로 구성됩니다. 여기서는 먼저 템플릿 코드를 다음과 같이 작성합니다.

<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
    <!-- 一组幻灯片代码开始,用到组件swiper -->
<!-- indicator-dots autoplay interval……:组件相关属性,具体可以查看官网说明 -->
                    <swiper class="swiper" indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" duration="duration">
                        <!-- 每组幻灯片中的子项目 1 -->
<swiper-item>
<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
<!-- 每组幻灯片中的子项目 2 -->
                        <swiper-item>
<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
<!-- 每组幻灯片中的子项目 3 -->
                        <swiper-item>
<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>
로그인 후 복사

두 번째 여기에서는 데이터와 사용자 상호 작용이 아직 사용되지 않으므로 여기에서는 js 코드가 변경되지 않으므로 다음과 같이 유지하세요.

<script>
export default {
data() {
return {
}
},
onLoad() {
 
},
methods: {
 
}
}
</script>
로그인 후 복사

마지막은 다음과 같은 CSS 코드입니다.

<style>
/* 将这组幻灯片中的子项目改成我们设计图中的灰色 */
swiper-item{
background-color: #f8f8f8;
}
</style>
로그인 후 복사

3.

run to Google Browse 도구를 사용하면 다음과 같은 효과를 볼 수 있습니다.

uniapp에서 홈페이지 슬라이드쇼를 만드는 방법

마지막으로 전체 페이지의 코드를 첨부합니다.

<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
    <!-- 一组幻灯片代码开始,用到组件swiper -->
<!-- indicator-dots autoplay interval……:组件相关属性,具体可以查看官网说明 -->
                    <swiper class="swiper" indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" duration="duration">
                        <!-- 每组幻灯片中的子项目 1 -->
<swiper-item>
<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
<!-- 每组幻灯片中的子项目 2 -->
                        <swiper-item>
<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
<!-- 每组幻灯片中的子项目 3 -->
                        <swiper-item>
<!-- 此处放内容,可以是图片,也可是图片加文字 -->
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>
 
<script>
export default {
data() {
return {
}
},
onLoad() {
 
},
methods: {
 
}
}
</script>
 
<style>
/* 将这组幻灯片中的子项目改成我们设计图中的灰色 */
swiper-item{
background-color: #f8f8f8;
}
</style>
로그인 후 복사

관련 무료 학습 권장 사항: php 프로그래밍(동영상)

위 내용은 uniapp에서 홈페이지 슬라이드쇼를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿