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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。