用uni-app制作首页幻灯片

引言

此教程为《教你用WordPress开发app（小程序）-包含所有源代码》系列教程之一。

前面我们用uni-app搭建出了我们的app，但现在的app是什么内容都没有的，在这篇教程之中我将讲解怎么样制作首页幻灯片。

先看一下简易设计图：

开始
1、修改配置文件

首先我们需要在前面创建的项目根目录下面的页面配置文件中（pages.json）将导航栏背景设置为黑色，并且将头部字体颜色设置为白色。

配置完成之后代码如下：

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index",//首页文件路径"style": {"navigationBarTitleText": "首页"//首页头部标题}}],"globalStyle": {"navigationBarTextStyle": "white",//导航栏标题颜色（仅支持 black/white）"navigationBarTitleText": "WPApp",//导航栏默认标题"navigationBarBackgroundColor": "#000000;",//导航栏背景颜色，此处为黑色"backgroundColor": "#F8F8F8"//页面背景颜色}
}

2、编写首页代码

需要在首页添加幻灯片，我们这里需要用到uni-app官方的组件，具体使用方法大家可以点击链接查看：swiper

随后，依次打开目录pages>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代码，因为这里暂时还没有用到数据以及用户交互，所以这里就先不改变js代码，保留如下：

<script>export default {data() {return {}},onLoad() {},methods: {}}
</script>

最后是css代码，如下：

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

3、运行

运行到谷歌浏览器就可以看到如下效果：

最后附上整个页面的代码：

<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>

结束

自此，我们的客户端幻灯片就已经写好了，但你可以看到的是这并不是我们想要的幻灯片，那是因为暂时还没有进行数据交互，在下一教程中我将讲解如何利用WordPress开发幻灯片接口并且渲染到app上面。

用uni-app制作首页幻灯片

用uni-app制作首页幻灯片相关推荐

自适应幻灯片代码 app_低成本0基础开发app之开发首页幻灯片接口
前言本教程为教你怎么用WordPress开发一个属于你自己的app(小程序) 前面我们用uni-app框架写好了首页幻灯片,现在我开始讲解怎么样从服务端获取幻灯片数据,这里就获取三篇文章的缩略图用来 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.创建项目首先打开在线编辑器地址:https://editor.ivx ...
基于jQuery的新浪游戏首页幻灯片
分享一款基于jQuery的新浪游戏首页幻灯片,带左右箭头,选项卡缩略图,自动轮播切换的jQuery幻灯片代码.效果图如下: 在线预览源码下载实现的代码. html代码: <br> ...
【小程序开发之制作首页】
博客阅读顺序 1.准备工作链接:(41条消息) [小程序开发之微信登录]_隐隐池玉的博客-CSDN博客 2.实现调用微信登录链接:(41条消息) [小程序开发之微信登录]_隐隐池玉的博客-CS ...
吐血总结：国内外App制作平台大集合，总有一款适合你
想创业的小伙伴,如果你有一个很棒的创意,可是你不会编程怎么办?外包.合伙开发还是从零学编程?这里提供另外一种方式--使用无需编程的App DIY开发工具.DIY开发工具不仅节省了开发时间和资金,更为那 ...
微信小程序项目开发---第一章制作首页
一.设置首页标题 (1)找到并打开app.json (2)找到"window"属性下的 "示例01"可替换成自己的项目名称拓展: backgroundCol ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
记录考研英语一真题单词汇总及APP制作
记录考研英语一真题单词汇总及APP制作很高兴在此记录我第一个拥有著作权的书,以及自己做的第一个APP(软件著作权还在申请中). 著作权证书如下: 2020年考研结束便很想做一个真题单词本.因为考研时 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...

用uni-app制作首页幻灯片

引言

结束

用uni-app制作首页幻灯片相关推荐

最新文章

热门文章