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. PMU 简介

    目录 1:PMIC2:Battery管理3:功耗4:常见问题5:参考文献 PMIC[MT6322]    Source code structure Build option Battery char ...

  2. Attribute "not-null" must be declared for element type "property"解决办法

    Attribute "not-null" must be declared for element type "property"解决办法 在hiberante ...

  3. 「CodePlus 2018 3 月赛」白金元首与克劳德斯

    所有的云在此时没有重叠的面积 所有的云在此时没有重叠的面积 所有的云在此时没有重叠的面积 所有的云在此时没有重叠的面积 所有的云在此时没有重叠的面积 所有的云在此时没有重叠的面积 所有的云在此时没有重 ...

  4. csu 1600: Twenty-four point

    传送门 1600: Twenty-four point Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 490  Solved: 78[Submit][S ...

  5. Linux下出现launch failed.Binary not found的解决方案

    Linux下出现launch failed.Binary not found的解决方案: Project->Properties->C/C++Build->Settings-> ...

  6. rabbitmq management Login Failed

    默认用户guest 只允许localhost登录. so... 我们自己建立用户 1. 用户管理 用户管理包括增加用户,删除用户,查看用户列表,修改用户密码. 相应的命令 (1) 新增一个用户 rab ...

  7. Meteor Assets资源

    静态服务器资源位于应用程序内的 private 子文件夹.在这个例子中,我们将学习如何从简单的JSON文件中使用数据. 第1步 - 创建文件和文件夹 让我们创建一个 private 文件夹并在这个文件 ...

  8. org.json.JSONException: A JSONObject text must begin with &#39;{&#39; at character 1 of {解决方法

    在使用java读取一个本地的json配置文件的时候,产生了这个异常:org.json.JSONException: A JSONObject text must begin with '{' at c ...

  9. HDU 1272: 小希的迷宫(并查集)

    小希的迷宫 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  10. CV_HAAR_FEATURE_DESC_MAX和CV_HAAR_FEATURE_MAX

    #define CV_HAAR_FEATURE_MAX 3 //提前定义的一个宏,在程序中表示一个haar特征由至多三个矩形组成 #define CV_HAAR_FEATURE_DESC_MAX 20 ...