用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序三个视图控件View、ScrollView、Swiper的解读及示例

纸飞机 2018-3-8 09:37

分享者:qq_37321107,原文地址 关于微信的视图控件,今天带给大家系统的解读和示范,相信看完后都可以轻松用好了。首先看一下这个示例程序的运行效果。 大家可以看到,有三个视图,分别用不同的配置和使用方式。 接 ...

分享者:qq_37321107,

原文地址


关于微信的视图控件,今天带给大家系统的解读和示范,相信看完后都可以轻松用好了。

首先看一下这个示例程序的运行效果。

大家可以看到,有三个视图,分别用不同的配置和使用方式。
接下来我们具体展开来介绍。

我们先新建一个项目,在首页添加三个navigator导航按钮,分别跳转到对应的组件示范页面。

index页面的WXML代码如下:

  1. class="usermotto">
  2. class="user-motto">{{motto}}
  3. class="viewName">
  4. url="Component/View/View">
  5. class="view-Name">View组件示范
  6. class="viewName">
  7. url="Component/ScrollView/ScrollView">
  8. class="view-Name">Scroll-View组件示范
  9. class="viewName">
  10. url="Component/Swiper/Swiper">
  11. class="view-Name">Swiper组件示范
  12. class="usermotto">
  13. class="project-info">{{info}}

index页面的JS代码如下:

  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. Page({
  5. data: {
  6. motto: '基础视图View,滑动视图ScrollView,滑块Swiper',
  7. info: '更多教程和源码请关注51小程序:http://html51.com/',
  8. userInfo: {}
  9. },
  10. onLoad: function () {
  11. console.log('onLoad')
  12. var that = this
  13. //调用应用实例的方法获取全局数据
  14. app.getUserInfo(function(userInfo){
  15. //更新数据
  16. that.setData({
  17. userInfo:userInfo
  18. })
  19. })
  20. 邀请

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏