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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/storebook/p/9517154.html

小程序-demo：小程序示例-page/component相关推荐

  1. 小程序-demo：小程序示例-page/api

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

  2. WX小程序demo示例

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

  3. 微信小程序的一些新手示例（￥62）

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

  4. 最常用的小程序demo

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

  5. 小程序-demo：知乎日报

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

  6. 小程序-demo：小熊の日记

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

  7. 小程序开发教程、小程序资讯、小程序demo、小程序实战等合揖（7月19日更新）

    7月19日微信小程序联盟更新的小程序开发教程.小程序资讯.小程序demo.小程序实战内容合揖如下: 小程序资讯与小程序教程 一张图带你看懂小程序发展蓝皮书 2017-07-19 微信小程序开发问答&l ...

  8. 小程序开发教程、小程序资讯、小程序demo、小程序实战等合揖（7月19日更新）...

    2019独角兽企业重金招聘Python工程师标准>>> 7月19日微信小程序联盟更新的小程序开发教程.小程序资讯.小程序demo.小程序实战内容合揖如下: #小程序资讯与小程序教程 ...

  9. 最全微信小程序demo

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

最新文章

  1. 创新方法系列 如何找联系 符号化就是找数学中的等于==关系，遇到等号请留意
  2. ArcGIS AO中控制图层中要素可见状态的总结
  3. leetcode 424. Longest Repeating Character Replacement | 424. 替换后的最长重复字符（Java）
  4. c#汉字拼音转换拼音
  5. T-sql检测文件夹是否存在
  6. 安装redis出现cc adlist.o /bin/sh:1:cc:not found
  7. 移除html，jsp中的元素
  8. 前端学习（1370）:错误处理中间件
  9. 如何制作高效率的数据可视化大屏
  10. 51单片机8路抢答器c语言,51单片机8路抢答器
  11. Word VBA-标题设置
  12. 浅谈UDP(数据包长度，收包能力，丢包及进程结构选择)
  13. selenium实现12306全自动购票
  14. JS 函数参数及其传递
  15. ubuntu 20 无法联网或无法解析域名（2022最新办法，实测有效）
  16. C语言 模拟简单的地铁售票系统
  17. 【十五】傅里叶变换，拉斯变换，z变换的关系
  18. 如何升级npm的版本
  19. 机器人基础研究和应用研究的内容
  20. Simulink中的虚拟和非虚拟子系统

热门文章

  1. Mips KVM TrapEmulate implemented in Linux
  2. syslog数据接收并处理
  3. BZOJ 1588: [HNOI2002]营业额统计
  4. python 标准差_标准差python
  5. cnc加工中心保养表_CNC加工中心有哪些日常保养方法？
  6. 中国科技大学校长朱清时：我的两次“错误”选择
  7. 快速排序pascal程序
  8. 在Java生成的html页面加水印,Java在Excel中添加水印的实现(单一水印、平铺水印)...
  9. gis 大屏_gis大屏可视化应用技术方案_gis大屏可视化应用技术_gis大屏可视化应用 - 帆软...
  10. python grequests极限_Python使用grequests并发发送请求