ylbtech-小程序-demo:小程序示例-page/component

以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档。

1. page/component返回顶部
1、
a) .js
Page({
data: {
list: [
{
id: 'view',
name: '视图容器',
open: false,
pages: ['view', 'scroll-view', 'swiper']
}, {
id: 'content',
name: '基础内容',
open: false,
pages: ['text', 'icon', 'progress']
}, {
id: 'form',
name: '表单组件',
open: false,
pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider', 'switch', 'textarea']
}, {
id: 'nav',
name: '导航',
open: false,
pages: ['navigator']
}, {
id: 'media',
name: '媒体组件',
open: false,
pages: ['image', 'audio', 'video']
}, {
id: 'map',
name: '地图',
pages: ['map']
}, {
id: 'canvas',
name: '画布',
pages: ['canvas']
}
]
},
kindToggle: function (e) {
var id = e.currentTarget.id, list = this.data.list;
for (var i = 0, len = list.length; i < len; ++i) {
if (list[i].id == id) {
list[i].open = !list[i].open
} else {
list[i].open = false
}
}
this.setData({
list: list
});
}
})
b) .json
{
"navigationBarTitleText": "小程序官方组件展示"
}
c) .wxml
<view class="index">
<view class="index-hd">
<image class="index-logo" src="resources/kind/logo.png"></image>
<view class="index-desc">以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档。</view>
</view>
<view class="index-bd">
<view class="kind-list">
<block wx:for-items="{{list}}" wx:key="{{item.id}}">
<view class="kind-list-item">
<view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
<view class="kind-list-text">{{item.name}}</view>
<image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
</view>
<view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
<view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
<block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
<navigator url="pages/{{page}}/{{page}}" class="navigator">
<view class="navigator-text">{{page}}</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
d) .wxss
@import "../common/index.wxss";
e)
2、pages
3、resources
-kind
-pic
4、
2.  ./pages/view 试图容器返回顶部
1、view
a) .js
b) .json
c) .wxml
d) .wxss
e)
2、scroll-view
a) .js
b) .json
c) .wxml
d) .wxss
e)
3、swiper
a) .js
b) .json
c) .wxml
d) .wxss
e)
4、
3. ./pages/content 基础内容返回顶部
1、text
a) .js
b) .json
c) .wxml
d) .wxss
e)
2、icon
a) .js
b) .json
c) .wxml
d) .wxss
e)
3、progress
a) .js
b) .json
c) .wxml
d) .wxss
e)
4. ./pages/form 表单组件返回顶部
1、button
a) .js
b) .json
c) .wxml
d) .wxss
e)
2、checkbox
a) .js
b) .json
c) .wxml
d) .wxss
e)
3、form
a) .js
b) .json
c) .wxml
d) .wxss
e)
4、input
a) .js
b) .json
c) .wxml
d) .wxss
e)
5、label
a) .js
b) .json
c) .wxml
d) .wxss
e)
6、picker
1、view
a) .js
b) .json
c) .wxml
d) .wxss
e)
7、radio
a) .js
b) .json
c) .wxml
d) .wxss
e)
8、slider
a) .js
b) .json
c) .wxml
d) .wxss
e)
9、switch
a) .js
b) .json
c) .wxml
d) .wxss
e)
10、textarea
a) .js
b) .json
c) .wxml
d) .wxss
e)
11、
5. ./pages/nav 导航返回顶部
1、navigator
a) .js
b) .json
c) .wxml
d) .wxss
e)
2、
 
6. ./pages/media 媒体组件返回顶部
1、image
a) .js
b) .json
c) .wxml
d) .wxss
e)
2、audio
a) .js
b) .json
c) .wxml
d) .wxss
e)
3、video
a) .js
b) .json
c) .wxml
d) .wxss
e)
4、
7. ./pages/map 地图返回顶部
1、map
a) .js
b) .json
c) .wxml
d) .wxss
e)
2、
8. ./pages/canvas 画布返回顶部
1、canvas
a) .js
b) .json
c) .wxml
d) .wxss
e)
2、
9.返回顶部
 
10.返回顶部
 
 
11.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

小程序-demo:小程序示例-page/component的更多相关文章

  1. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  2. 小程序-demo:小程序示例-page/api

    ylbtech-小程序-demo:小程序示例-page/api 以下将演示小程序接口能力,具体属性参数详见小程序开发文档. 1. page/component返回顶部 1. a) .js Page({ ...

  3. 小程序-demo:小程序示例-page/component2

    ylbtech-小程序-demo:小程序示例-page/component2 以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档. 1. ...

  4. 小程序-demo:小程序示例-page/common

    ylbtech-小程序-demo:小程序示例-page/common 1.返回顶部 0.     1. 2. pages/common返回顶部 1. -lib --weui.wxss /*! * we ...

  5. 小程序-demo:小程序示例

    ylbtech-小程序-demo:小程序示例     1.返回顶部 0. 1.app.js const openIdUrl = require('./config').openIdUrl App({ ...

  6. 小程序-demo:知乎日报

    ylbtech-小程序-demo:知乎日报 1.返回顶部 0.         1.app.js //app.js App({ onLaunch: function () { //调用API从本地缓存 ...

  7. 小程序-demo:小熊の日记

    ylbtech-小程序-demo:小熊の日记 1.CHANGELOG.md # -- * 更新开发者工具至`v0.10.101100` * 修改`new`页的数据绑定方式 & 修改多行文本框输 ...

  8. 小程序-demo:天气预报

    ylbtech-小程序-demo:天气预报 1.返回顶部 1.app.js //app.js App({ //系统事件 onLaunch: function () {//小程序初始化事件 var th ...

  9. 番外篇!全球首个微信应用号开发教程!小程序 DEMO 视频奉上!

    大家好,我是博卡君.经过国庆节的七天假期,相信很多朋友都已经研究出自己的小程序 demo 了吧?我最近也利用休息时间关注了一下网上关于小程序开发的讨论,今天就利用这个番外篇谈谈自己对小程序的一些想法吧 ...

随机推荐

  1. Divide Groups(分组)(二分图染色)

    题目链接 题目大意是说输入数字n 然后告诉你第i个人都认识谁? 让你把这些人分成两堆,使这每个堆里的人都互相认识. 做法:把不是互相认识的人建立一条边,则构建二分图,两堆的人肯定都互相认识,也就是说, ...

  2. 搭建nexus私服,无法下载相关jar包,报错Repository proxy-mode is BLOCKED_AUTO

    在搭建nexus私服的时候,之前没直接用来下载maven的相关插件jar包,一直可以使用, 结果今天要编译hadoop的时候,在linux上新用maven就报错了,无法下载maven的相关插件(如下) ...

  3. how to read openstack code: Core plugin and resource extension

    本章我们将写一个自己的core plugin 和一个resource extension来加深理解.(阅读本文的前提是你已经理解了restful以及stevedore等内容) 什么是 core plu ...

  4. IntelliJ 中类似于Eclipse ctrl+o的是ctrl+F12

    IntelliJ 中类似于Eclipse ctrl+o的是ctrl+F12 学习了:https://blog.csdn.net/sjzylc/article/details/47979815

  5. ThoughtWorks技术雷达

    ThoughtWorks技术雷达 技术成熟方案的一个推荐网站.

  6. C++开发人脸性别识别教程(8)——搭建MFC框架之读取目录信息

    在上一篇博客中我们已经绘制了MFC界面,在这篇博客中我们将加入响应代码,为MFC框架加入一个最主要的功能:打开一个目录. 一.加入相关头文件 这里头文件主要包括三类:opencv头文件.批量读取文件相 ...

  7. glTF格式初步了解

    glTF格式初步了解 近期看到Qt 3D的进展.偶然了解到了一种新的格式:glTF格式.这样的格式据说比现有的3D格式更加符合OpenGL应用的须要.这引起了我的好奇.于是我在Qt 3D的外部链接中找 ...

  8. poj 1426 Find The Multiple ( BFS+同余模定理)

    Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 18390   Accepted: 744 ...

  9. 使用python转换markdown to html

    起因 有很多编辑器可以直接将markdown转换成html,为什么还要自己写呢?因为我想写完markdown之后,即可以保存在笔记软件中(比如有道),又可以放到github进行版本管理,还可以发布到博 ...

  10. Eclipse:Some sites could not be found. See the error log for more detail.解决的方法

    今天遇到了一个奇葩的问题.我把我的sdk tools的版本号升级到23后.我在eclipse中尝试升级ADT,发现了这么一个问题,以下分析下原因: 当我在eclipse中选择Help-->Che ...