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

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

이 튜토리얼의 운영 환경: 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에 프로젝트를 생성할 때 이미 코드의 일부가 있습니다. 쓸모가 없으므로 먼저 원본 코드를 삭제한 다음 아래와 같이

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

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 도구를 사용하면 다음과 같은 효과를 볼 수 있습니다.

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

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!