小程序-demo：小程序示例-page/component
2024-09-30 15:08:07
| 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/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
最新文章
- Visual Studio 15 Preview 4安装
- 修改mongodb3.0副本集用户密码遇到的坑
- ubuntu-16.10-desktop-amd64.iso 版本 安装 oracle 11gR2 11.2.0.1 database
- 「C语言」C输出hello world！系统发生了什么？
- css调用外部样式和css样式说明剧中显示
- 推荐两篇Unity与Android交互的文章
- Web前端代码规范与页面布局
- Sublime text 3 格式化HTML/css/js/json代码 插件
- cocos2dx3.2 推断音效是否播放
- mysql数据库实操笔记20170418
- 【MySQL】 清除等待连接
- Apache Spark 2.2.0 中文文档 - Spark SQL, DataFrames and Datasets Guide | ApacheCN
- Codeforces Round #467 (div.2)
- JAVA中字符串比较equals()和equalsIgnoreCase()的区别
- AtCoder Grand Contest 010 D - Decrementing
- shell中的函数 shell中的数组 告警系统需求分析
- Jmeter（二十四）Jmeter-Question之“加密请求参数”
- [agc011C]Squared Graph-[二分图]
- Linux屏幕记录命令script
- 在Visual Studio中使用序列图描述对象之间的互动