小程序-demo:小程序示例-page/component
ylbtech-小程序-demo:小程序示例-page/component |
以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档。
1. page/component返回顶部 |
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
});
}
})
{
"navigationBarTitleText": "小程序官方组件展示"
}
<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>
@import "../common/index.wxss";
2. ./pages/view 试图容器返回顶部 |
3. ./pages/content 基础内容返回顶部 |
4. ./pages/form 表单组件返回顶部 |
5. ./pages/nav 导航返回顶部 |
6. ./pages/media 媒体组件返回顶部 |
7. ./pages/map 地图返回顶部 |
8. ./pages/canvas 画布返回顶部 |
9.返回顶部 |
10.返回顶部 |
11.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
小程序-demo:小程序示例-page/component的更多相关文章
- 近期热门微信小程序demo源码下载汇总
近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...
- 小程序-demo:小程序示例-page/api
ylbtech-小程序-demo:小程序示例-page/api 以下将演示小程序接口能力,具体属性参数详见小程序开发文档. 1. page/component返回顶部 1. a) .js Page({ ...
- 小程序-demo:小程序示例-page/component2
ylbtech-小程序-demo:小程序示例-page/component2 以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档. 1. ...
- 小程序-demo:小程序示例-page/common
ylbtech-小程序-demo:小程序示例-page/common 1.返回顶部 0. 1. 2. pages/common返回顶部 1. -lib --weui.wxss /*! * we ...
- 小程序-demo:小程序示例
ylbtech-小程序-demo:小程序示例 1.返回顶部 0. 1.app.js const openIdUrl = require('./config').openIdUrl App({ ...
- 小程序-demo:知乎日报
ylbtech-小程序-demo:知乎日报 1.返回顶部 0. 1.app.js //app.js App({ onLaunch: function () { //调用API从本地缓存 ...
- 小程序-demo:小熊の日记
ylbtech-小程序-demo:小熊の日记 1.CHANGELOG.md # -- * 更新开发者工具至`v0.10.101100` * 修改`new`页的数据绑定方式 & 修改多行文本框输 ...
- 小程序-demo:天气预报
ylbtech-小程序-demo:天气预报 1.返回顶部 1.app.js //app.js App({ //系统事件 onLaunch: function () {//小程序初始化事件 var th ...
- 番外篇!全球首个微信应用号开发教程!小程序 DEMO 视频奉上!
大家好,我是博卡君.经过国庆节的七天假期,相信很多朋友都已经研究出自己的小程序 demo 了吧?我最近也利用休息时间关注了一下网上关于小程序开发的讨论,今天就利用这个番外篇谈谈自己对小程序的一些想法吧 ...
随机推荐
- Divide Groups(分组)(二分图染色)
题目链接 题目大意是说输入数字n 然后告诉你第i个人都认识谁? 让你把这些人分成两堆,使这每个堆里的人都互相认识. 做法:把不是互相认识的人建立一条边,则构建二分图,两堆的人肯定都互相认识,也就是说, ...
- 搭建nexus私服,无法下载相关jar包,报错Repository proxy-mode is BLOCKED_AUTO
在搭建nexus私服的时候,之前没直接用来下载maven的相关插件jar包,一直可以使用, 结果今天要编译hadoop的时候,在linux上新用maven就报错了,无法下载maven的相关插件(如下) ...
- how to read openstack code: Core plugin and resource extension
本章我们将写一个自己的core plugin 和一个resource extension来加深理解.(阅读本文的前提是你已经理解了restful以及stevedore等内容) 什么是 core plu ...
- IntelliJ 中类似于Eclipse ctrl+o的是ctrl+F12
IntelliJ 中类似于Eclipse ctrl+o的是ctrl+F12 学习了:https://blog.csdn.net/sjzylc/article/details/47979815
- ThoughtWorks技术雷达
ThoughtWorks技术雷达 技术成熟方案的一个推荐网站.
- C++开发人脸性别识别教程(8)——搭建MFC框架之读取目录信息
在上一篇博客中我们已经绘制了MFC界面,在这篇博客中我们将加入响应代码,为MFC框架加入一个最主要的功能:打开一个目录. 一.加入相关头文件 这里头文件主要包括三类:opencv头文件.批量读取文件相 ...
- glTF格式初步了解
glTF格式初步了解 近期看到Qt 3D的进展.偶然了解到了一种新的格式:glTF格式.这样的格式据说比现有的3D格式更加符合OpenGL应用的须要.这引起了我的好奇.于是我在Qt 3D的外部链接中找 ...
- poj 1426 Find The Multiple ( BFS+同余模定理)
Find The Multiple Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18390 Accepted: 744 ...
- 使用python转换markdown to html
起因 有很多编辑器可以直接将markdown转换成html,为什么还要自己写呢?因为我想写完markdown之后,即可以保存在笔记软件中(比如有道),又可以放到github进行版本管理,还可以发布到博 ...
- Eclipse:Some sites could not be found. See the error log for more detail.解决的方法
今天遇到了一个奇葩的问题.我把我的sdk tools的版本号升级到23后.我在eclipse中尝试升级ADT,发现了这么一个问题,以下分析下原因: 当我在eclipse中选择Help-->Che ...