uniapp教程文档,uniapp示例

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

留言与评论(共有 条评论)
   
验证码: