uniapp教程文档,uniapp示例
Uniapp制作home slide的方法：先修改配置文件；然后写首页代码，代码是[view class= page-section-spacing ]；最后，完成css代码并运行它。
UNI-APP开发(仿饿)开发课程：进入学习
本教程运行环境：windows7系统，Uni-App版本2.5.1。这个方法适用于所有品牌的电脑。
推荐(免费):uni-app开发教程
uniapp做首页幻灯片的方法：
1、修改配置文件
首先，我们需要在之前创建的项目的根目录下的页面配置文件(pages.json)中将导航栏的背景设置为黑色，页眉的字体颜色设置为白色。
配置完成后，代码如下：
{
pages :[//pages数组中的第一项表示应用程序启动页面，
{
Path: pages/index/index ，//主页文件路径
样式:{
NavigationBarTitleText :主页//主页标题
}
}
],
globalStyle: {
导航栏文本样式: white ，//导航栏标题颜色(仅支持黑/白)
导航栏标题文本: WP应用，//导航栏的默认标题
navigationBarBackgroundColor : # 000000；，//导航栏的背景色，这里是黑色。
BackgroundColor: #F8F8F8//页面背景色
}
}2、编写首页代码
我们需要在首页添加幻灯片。这里需要用到uni-app的官方组件。可以点击链接查看具体使用方法：swiper。然后，依次打开目录pagesindexindex.vue，我们在index.vue中创建项目的时候，已经有一部分代码对我们没有用了，所以我们先删除了这些原始代码，删除后如下图所示：
删除现有代码后，我们开始写我们想要的代码。这里，我们需要在首页添加一个幻灯片功能，所以我们从这里开始写幻灯片代码。
在uni-app中，一个页面由三部分组成：模板代码(视图)、js代码(数据、交互)和css代码(视图样式)。在这里，我们首先编写如下模板代码：
模板
视角
view class=uni-padding-wrap
view class=page-section swiper
view class= page-section-spacing
！-使用组件swiper启动一组滑动代码-
！-指示器-点自动播放间隔.....................
swiper class= swiper indicator-dots= indicator dots autoplay= autoplay interval= interval duration= duration
！-每组幻灯片中的子项目1-
swiper-项目
！-把内容放在这里，可以是图片，也可以是带文字的图片-
/swiper-item
！-每组幻灯片中的子项目2-
swiper-项目
！-把内容放在这里，可以是图片，也可以是带文字的图片-
/swiper-item
！-每组幻灯片中的子项目3-
swiper-项目
！-把内容放在这里，可以是图片，也可以是带文字的图片-
/swiper-item
/swiper
/查看
/查看
/查看
/查看
/template后面是js代码。因为这里暂时没有用到数据和用户交互，所以这里不会改变js代码，会保留如下：
脚本
导出默认值{
data() {
返回{
}
},
onLoad() {
},
方法：{
}
}
/script是最后的css代码，如下：
风格
/*在我们的设计图中将这组幻灯片中的子项目更改为灰色*/
swiper-item{
背景色：# f8f8f8
}
/style3、运行
运行到谷歌Chrome，可以看到以下效果：
最后附上整个页面的代码：
模板
视角
view class=uni-padding-wrap
view class=page-section swiper
view class= page-section-spacing
！-使用组件swiper启动一组滑动代码-
！-指示器-点自动播放间隔.....................
swiper class= swiper indicator-dots= indicator dots autoplay= autoplay interval= interval duration= duration
！-每组幻灯片中的子项目1-
swiper-项目
！-把内容放在这里，可以是图片，也可以是带文字的图片-
/swiper-item
！-每组幻灯片中的子项目2-
swiper-项目
！-把内容放在这里，可以是图片，也可以是带文字的图片-
/swiper-item
！-每组幻灯片中的子项目3-
swiper-项目
！-把内容放在这里，可以是图片，也可以是带文字的图片-
/swiper-item
/swiper
/查看
/查看
/查看
/查看
/模板
脚本
导出默认值{
data() {
返回{
}
},
onLoad() {
},
方法：{
}
}
/脚本
风格
/*在我们的设计图中将这组幻灯片中的子项目更改为灰色*/
swiper-item{
背景色：# f8f8f8
}
/style相关免费学习推荐：php编程(视频)
以上是uniapp如何制作正面幻灯片的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。