| ylbtech-小程序-demo：小程序示例-page/component2 |
以下将展示小程序官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见小程序开发文档。
| 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
Page({})b) .json
{
"navigationBarTitleText":"view"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'view'}}"/> <view class="page-body">
<view class="page-section">
<view class="page-section-title">
<text>flex-direction: row\n横向布局</text>
</view>
<view class="page-section-spacing">
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item demo-text-1"></view>
<view class="flex-item demo-text-2"></view>
<view class="flex-item demo-text-3"></view>
</view>
</view>
</view>
<view class="page-section">
<view class="page-section-title">
<text>flex-direction: column\n纵向布局</text>
</view>
<view class="flex-wrp" style="flex-direction:column;">
<view class="flex-item flex-item-V demo-text-1"></view>
<view class="flex-item flex-item-V demo-text-2"></view>
<view class="flex-item flex-item-V demo-text-3"></view>
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
.flex-wrp{
margin-top: 60rpx;
display:flex;
}
.flex-item{
width: 200rpx;
height: 300rpx;
font-size: 26rpx;
}
.flex-item-V{
margin: 0 auto;
width: 300rpx;
height: 200rpx;
}e)
2、scroll-view
a) .js
var order = ['demo1', 'demo2', 'demo3']
Page({
data: {
toView: 'green'
},
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
},
scrollToTop: function(e) {
this.setAction({
scrollTop: 0
})
},
tap: function(e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1],
scrollTop: (i + 1) * 200
})
break
}
}
},
tapMove: function(e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})
b) .json
{
"navigationBarTitleText": "scroll-view"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'scroll-view'}}"/> <view class="page-body">
<view class="page-section">
<view class="page-section-title">
<text>Vertical Scroll\n纵向滚动</text>
</view>
<view class="page-section-spacing">
<scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id="demo1" class="scroll-view-item demo-text-1"></view>
<view id="demo2" class="scroll-view-item demo-text-2"></view>
<view id="demo3" class="scroll-view-item demo-text-3"></view>
</scroll-view>
</view>
</view>
<view class="page-section">
<view class="page-section-title">
<text>Horizontal Scroll\n横向滚动</text>
</view>
<view class="page-section-spacing">
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
<view id="demo1" class="scroll-view-item_H demo-text-1"></view>
<view id="demo2" class="scroll-view-item_H demo-text-2"></view>
<view id="demo3" class="scroll-view-item_H demo-text-3"></view>
</scroll-view>
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
.page-section-spacing{
margin-top: 60rpx;
}
.scroll-view_H{
white-space: nowrap;
}
.scroll-view-item{
height: 300rpx;
}
.scroll-view-item_H{
display: inline-block;
width: 100%;
height: 300rpx;
}e)
3、swiper
a) .js
Page({
data: {
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
}
})b) .json
{
"navigationBarTitleText": "swiper"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'swiper'}}"/> <view class="page-body">
<view class="page-section page-section-spacing swiper">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
<view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">指示点</view>
<view class="weui-cell__ft">
<switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
</view>
</view>
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">自动播放</view>
<view class="weui-cell__ft">
<switch checked="{{autoplay}}" bindchange="changeAutoplay" />
</view>
</view>
</view>
</view> <view class="page-section page-section-spacing">
<view class="page-section-title">
<text>幻灯片切换时长(ms)</text>
<text class="info">{{duration}}</text>
</view>
<slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
<view class="page-section-title">
<text>自动播放间隔时长(ms)</text>
<text class="info">{{interval}}</text>
</view>
<slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
</view>
</view> <template is="foot" />
</view>
d) .wxss
@import "../../../common/lib/weui.wxss";
button{
margin-bottom: 30rpx;
}
button:last-child{
margin-bottom:;
}
.page-section-title{
padding:;
}
.swiper-item{
display: block;
height: 150px;
}
.page-section-title{
margin-top: 60rpx;
position: relative;
}
.info{
position: absolute;
right:;
color: #353535;
font-size: 30rpx;
}
.page-foot{
margin-top: 50rpx;
}e)
4、
| 3. ./pages/content 基础内容返回顶部 |
1、text
a) .js
var texts = [
'2011年1月，微信1.0发布',
'同年5月，微信2.0语音对讲发布',
'10月，微信3.0新增摇一摇功能',
'2012年3月，微信用户突破1亿',
'4月份，微信4.0朋友圈发布',
'同年7月，微信4.2发布公众平台',
'2013年8月，微信5.0发布微信支付',
'2014年9月，企业号发布',
'同月，发布微信卡包',
'2015年1月，微信第一条朋友圈广告',
'2016年1月，企业微信发布',
'2017年1月，小程序发布',
'......'
]; Page({
data: {
text: '',
canAdd: true,
canRemove: false
},
extraLine: [],
add: function(e) {
var that = this;
this.extraLine.push(texts[this.extraLine.length % 12])
this.setData({
text: this.extraLine.join('\n'),
canAdd: this.extraLine.length < 12,
canRemove: this.extraLine.length > 0
})
setTimeout(function(){
that.setData({
scrollTop: 99999
});
}, 0)
},
remove: function(e) {
var that = this;
if (this.extraLine.length > 0) {
this.extraLine.pop()
this.setData({
text: this.extraLine.join('\n'),
canAdd: this.extraLine.length < 12,
canRemove: this.extraLine.length > 0,
})
}
setTimeout(function(){
that.setData({
scrollTop: 99999
});
}, 0)
}
})
b) .json
{
"navigationBarTitleText": "text"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'text'}}"/> <view class="page-body">
<view class="page-section page-section-spacing">
<view class="text-box" scroll-y="true" scroll-top="{{scrollTop}}">
<text>{{text}}</text>
</view>
<button disabled="{{!canAdd}}" bindtap="add">add line</button>
<button disabled="{{!canRemove}}" bindtap="remove">remove line</button>
</view>
</view> <template is="foot" />
</view>
d) .wxss
button{
margin: 40rpx 0;
}
.text-box{
margin-bottom: 70rpx;
padding: 40rpx 0;
display: flex;
min-height: 300rpx;
background-color: #FFFFFF;
justify-content: center;
align-items: center;
text-align: center;
font-size: 30rpx;
color: #353535;
line-height: 2em;
}e)
2、icon
a) .js
Page({})b) .json
{
"navigationBarTitleText": "icon"
}c) .wxml
<import src="../../../common/head.wxml"/>
<import src="../../../common/foot.wxml"/> <view class="container">
<template is="head" data="{{title: 'icon'}}"/> <view class="icon-box">
<icon class="icon-box-img" type="success" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">成功</view>
<view class="icon-box-desc">用于表示操作顺利完成</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="info" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">提示</view>
<view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">普通警告</view>
<view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="warn" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">强烈警告</view>
<view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可严重的挽回的后果的情况</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="waiting" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">等待</view>
<view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="success" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">多选控件图标_已选择</view>
<view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="circle" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">多选控件图标_未选择</view>
<view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="warn" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">错误提示</view>
<view class="icon-box-desc">用于在表单中表示出现错误</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="success_no_circle" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">单选控件图标_已选择</view>
<view class="icon-box-desc">用于单选控件中，表示已选择该项目</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="download" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">下载</view>
<view class="icon-box-desc">用于表示可下载</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="info_circle" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">提示</view>
<view class="icon-box-desc">用于在表单中表示有信息提示</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="cancel" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">停止或关闭</view>
<view class="icon-box-desc">用于在表单中，表示关闭或停止</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="search" size="14"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">搜索</view>
<view class="icon-box-desc">用于搜索控件中，表示可搜索</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
.icon-box{
margin-bottom: 40rpx;
padding: 0 75rpx;
display: flex;
align-items: center;
}
.icon-box-img{
margin-right: 46rpx;
}
.icon-box-ctn{
flex-shrink:;
}
.icon-box-title{
font-size: 34rpx;
}
.icon-box-desc{
margin-top: 12rpx;
font-size: 26rpx;
color: #888;
}
.icon-small-wrp{
margin-right: 46rpx;
width: 93px;
height: 93px;
display: flex;
align-items: center;
justify-content: center;
}e)
3、progress
a) .js
Page({})b) .json
{
"navigationBarTitleText": "progress"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'progress'}}"/> <view class="page-body">
<view class="page-section page-section-gap"> <view class="progress-box">
<progress percent="20" show-info stroke-width="3"/>
</view> <view class="progress-box">
<progress percent="40" active stroke-width="3" />
<icon class="progress-cancel" type="cancel"></icon>
</view> <view class="progress-box">
<progress percent="60" active stroke-width="3" />
</view> <view class="progress-box">
<progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
progress{
width: 100%;
}
.progress-box{
display: flex;
height: 50rpx;
margin-bottom: 60rpx;
}
.progress-cancel{
margin-left: 40rpx;
}e)
| 4. ./pages/form 表单组件返回顶部 |
1、button
a) .js
var types = ['default', 'primary', 'warn']
var pageObject = {
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false
},
setDisabled: function(e) {
this.setData({
disabled: !this.data.disabled
})
},
setPlain: function(e) {
this.setData({
plain: !this.data.plain
})
},
setLoading: function(e) {
this.setData({
loading: !this.data.loading
})
}
} for (var i = 0; i < types.length; ++i) {
(function(type) {
pageObject[type] = function(e) {
var key = type + 'Size'
var changedData = {}
changedData[key] =
this.data[key] === 'default' ? 'mini' : 'default'
this.setData(changedData)
}
})(types[i])
} Page(pageObject)
b) .json
{
"navigationBarTitleText": "button"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'button'}}"/> <view class="page-body">
<view class="btn-area" id="buttonContainer">
<button type="primary">页面主操作 Normal</button>
<button type="primary" loading="true">页面主操作 Loading</button>
<button type="primary" disabled="true">页面主操作 Disabled</button> <button type="default">页面次要操作 Normal</button>
<button type="default" disabled="true">页面次要操作 Disabled</button> <button type="warn">警告类操作 Normal</button>
<button type="warn" disabled="true">警告类操作 Disabled</button> <view class="button-sp-area">
<button type="primary" plain="true">按钮</button>
<button type="primary" disabled="true" plain="true">不可点击的按钮</button> <button type="default" plain="true">按钮</button>
<button type="default" disabled="true" plain="true">按钮</button> <button class="mini-btn" type="primary" size="mini">按钮</button>
<button class="mini-btn" type="default" size="mini">按钮</button>
<button class="mini-btn" type="warn" size="mini">按钮</button>
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
button{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.button-sp-area{
margin: 0 auto;
width: 60%;
}
.mini-btn{
margin-right: 10rpx;
}e)
2、checkbox
a) .js
Page({
data: {
items: [
{value: 'USA', name: '美国'},
{value: 'CHN', name: '中国', checked: 'true'},
{value: 'BRA', name: '巴西'},
{value: 'JPN', name: '日本'},
{value: 'ENG', name: '英国'},
{value: 'FRA', name: '法国'}
]
},
checkboxChange: function(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
var items = this.data.items, values = e.detail.value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if(items[i].value == values[j]){
items[i].checked = true;
break
}
}
}
this.setData({
items: items
})
}
})b) .json
{
"navigationBarTitleText": "checkbox"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'checkbox'}}"/> <view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">默认样式</view>
<label class="checkbox">
<checkbox value="cb" checked="true"/>选中
</label>
<label class="checkbox">
<checkbox value="cb" />未选中
</label>
</view> <view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="weui-cells weui-cells_after-title">
<checkbox-group bindchange="checkboxChange">
<label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
<view class="weui-cell__hd">
<checkbox value="{{item.value}}" checked="{{item.checked}}"/>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</checkbox-group>
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
@import "../../../common/lib/weui.wxss";
.checkbox{
margin-right: 20rpx;
}e)
3、form
a) .js
Page({
data: {
pickerHidden: true,
chosen: ''
},
pickerConfirm: function (e) {
this.setData({
pickerHidden: true
})
this.setData({
chosen: e.detail.value
})
},
pickerCancel: function (e) {
this.setData({
pickerHidden: true
})
},
pickerShow: function (e) {
this.setData({
pickerHidden: false
})
},
formSubmit: function (e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset: function (e) {
console.log('form发生了reset事件，携带数据为：', e.detail.value)
this.setData({
chosen: ''
})
}
})b) .json
{
"navigationBarTitleText": "form"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'form'}}"/> <view class="page-body">
<form catchsubmit="formSubmit" catchreset="formReset">
<view class="page-section page-section-gap">
<view class="page-section-title">switch</view>
<switch name="switch"/>
</view> <view class="page-section page-section-gap">
<view class="page-section-title">radio</view>
<radio-group name="radio">
<label><radio value="radio1"/>选项一</label>
<label><radio value="radio2"/>选项二</label>
</radio-group>
</view> <view class="page-section page-section-gap">
<view class="page-section-title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>选项一</label>
<label><checkbox value="checkbox2"/>选项二</label>
</checkbox-group>
</view> <view class="page-section page-section-gap">
<view class="page-section-title">slider</view>
<slider value="50" name="slider" show-value ></slider>
</view> <view class="page-section">
<view class="page-section-title">input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__bd">
<input class="weui-input" name="input" placeholder="这是一个输入框" />
</view>
</view>
</view>
</view> <view class="btn-area">
<button type="primary" formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
</view> <template is="foot" />
</view>
d) .wxss
@import "../../../common/lib/weui.wxss";
label {
display: inline-block;
min-width: 270rpx;
margin-right: 20rpx;
}
form{
width: 100%;
}
.picker-text {
margin-left: 20rpx;
position: relative;
}e)
4、input
a) .js
Page({
data: {
focus: false,
inputValue: ''
},
bindKeyInput: function (e) {
this.setData({
inputValue: e.detail.value
})
},
bindReplaceInput: function (e) {
var value = e.detail.value
var pos = e.detail.cursor
var left
if (pos !== -1) {
// 光标在中间
left = e.detail.value.slice(0, pos)
// 计算光标的位置
pos = left.replace(/11/g, '2').length
}
// 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
return {
value: value.replace(/11/g, '2'),
cursor: pos
}
// 或者直接返回字符串,光标在最后边
// return value.replace(/11/g,'2'),
},
bindHideKeyboard: function (e) {
if (e.detail.value === '123') {
// 收起键盘
wx.hideKeyboard()
}
}
})b) .json
{
"navigationBarTitleText": "input"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'input'}}"/> <view class="page-body">
<view class="page-section">
<view class="weui-cells__title">可以自动聚焦的input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" auto-focus placeholder="将会获取焦点"/>
</view>
</view>
</view>
<view class="page-section">
<view class="weui-cells__title">控制最大输入长度的input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" maxlength="10" placeholder="最大输入长度为10" />
</view>
</view>
</view>
<view class="page-section">
<view class="weui-cells__title">实时获取输入值：{{inputValue}}</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
</view>
</view>
<view class="page-section">
<view class="weui-cells__title">控制输入的input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
</view>
</view>
<view class="page-section">
<view class="weui-cells__title">控制键盘的input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
</view>
</view>
<view class="page-section">
<view class="weui-cells__title">数字输入的input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" type="number" placeholder="这是一个数字输入框" />
</view>
</view>
</view>
<view class="page-section">
<view class="weui-cells__title">密码输入的input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" password type="text" placeholder="这是一个密码输入框" />
</view>
</view>
</view>
<view class="page-section">
<view class="weui-cells__title">带小数点的input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" type="digit" placeholder="带小数点的数字键盘"/>
</view>
</view>
</view>
<view class="page-section">
<view class="weui-cells__title">身份证输入的input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" type="idcard" placeholder="身份证输入键盘" />
</view>
</view>
</view>
<view class="page-section">
<view class="weui-cells__title">控制占位符颜色的input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
</view>
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
@import "../../../common/lib/weui.wxss";
.page-section{
margin-bottom: 20rpx;
}e)
5、label
a) .js
Page({
data: {
checkboxItems: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'}
],
radioItems: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'}
],
hidden: false
},
checkboxChange: function (e) {
var checked = e.detail.value
var changed = {}
for (var i = 0; i < this.data.checkboxItems.length; i++) {
if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
changed['checkboxItems[' + i + '].checked'] = true
} else {
changed['checkboxItems[' + i + '].checked'] = false
}
}
this.setData(changed)
},
radioChange: function (e) {
var checked = e.detail.value
var changed = {}
for (var i = 0; i < this.data.radioItems.length; i ++) {
if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
changed['radioItems[' + i + '].checked'] = true
} else {
changed['radioItems[' + i + '].checked'] = false
}
}
this.setData(changed)
},
tapEvent: function (e) {
console.log('按钮被点击')
}
})b) .json
{
"navigationBarTitleText": "label"
}c) .wxml ?点击该label下的文字默认选中第一个checkbox
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'label'}}"/> <view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">表单组件在label内</view>
<checkbox-group class="group" bindchange="checkboxChange">
<view class="label-1" wx:for="{{checkboxItems}}">
<label>
<checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
<text class="label-1-text">{{item.value}}</text>
</label>
</view>
</checkbox-group>
</view> <view class="page-section page-section-gap">
<view class="page-section-title">label用for标识表单组件</view>
<radio-group class="group" bindchange="radioChange">
<view class="label-2" wx:for="{{radioItems}}">
<radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
<label class="label-2-text" for="{{item.name}}"><text>{{item.name}}</text></label>
</view>
</radio-group>
</view> <view class="page-section page-section-gap">
<view class="page-section-title">label内有多个时选中第一个</view>
<label class="label-3">
<checkbox class="checkbox-3">选项一</checkbox>
<checkbox class="checkbox-3">选项二</checkbox>
<view class="label-3-text">点击该label下的文字默认选中第一个checkbox</view>
</label>
</view>
</view> <template is="foot" />
</view>
d) .wxss
.label-1, .label-2{
margin: 30rpx 0;
}
.label-3-text{
color: #576B95;
font-size: 28rpx;
}
.checkbox-3{
display: block;
margin: 30rpx 0;
}e)
6、picker
1、view
a) .js
Page({
data: {
array: ['中国', '美国', '巴西', '日本'],
index: 0,
date: '2016-09-01',
time: '12:01'
},
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindDateChange: function(e) {
this.setData({
date: e.detail.value
})
},
bindTimeChange: function(e) {
this.setData({
time: e.detail.value
})
}
})b) .json
{
"navigationBarTitleText": "picker"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'picker'}}"/> <view class="page-body">
<view class="page-section">
<view class="weui-cells__title">地区选择器</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">当前选择</view>
</view>
<view class="weui-cell__bd">
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="weui-input">{{array[index]}}</view>
</picker>
</view>
</view>
</view> <view class="weui-cells__title">时间选择器</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">当前选择</view>
</view>
<view class="weui-cell__bd">
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="weui-input">{{time}}</view>
</picker>
</view>
</view>
</view> <view class="weui-cells__title">日期选择器</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">当前选择</view>
</view>
<view class="weui-cell__bd">
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="weui-input">{{date}}</view>
</picker>
</view>
</view>
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
@import "../../../common/lib/weui.wxss";
.picker{
padding: 19rpx 26rpx;
background-color: #FFFFFF;
}e)
7、radio
a) .js
Page({
data: {
items: [
{value: 'USA', name: '美国'},
{value: 'CHN', name: '中国', checked: 'true'},
{value: 'BRA', name: '巴西'},
{value: 'JPN', name: '日本'},
{value: 'ENG', name: '英国'},
{value: 'FRA', name: '法国'},
]
},
radioChange: function(e) {
console.log('radio发生change事件，携带value值为：', e.detail.value)
var items = this.data.items;
for (var i = 0, len = items.length; i < len; ++i) {
items[i].checked = items[i].value == e.detail.value
}
this.setData({
items: items
});
}
})b) .json
{
"navigationBarTitleText": "radio"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'radio'}}"/> <view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">默认样式</view>
<label class="radio">
<radio value="r1" checked="true"/>选中
</label>
<label class="radio">
<radio value="r2" />未选中
</label>
</view> <view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="weui-cells weui-cells_after-title">
<radio-group bindchange="radioChange">
<label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}"> <view class="weui-cell__hd">
<radio value="{{item.value}}" checked="true"/>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</radio-group>
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
@import "../../../common/lib/weui.wxss";
.radio {
margin-right: 20rpx;
}e)
8、slider
a) .js
var pageData = {}
for (var i = 1; i < 5; ++i) {
(function (index) {
pageData['slider' + index + 'change'] = function(e) {
console.log('slider' + index + '发生change事件，携带值为', e.detail.value)
}
})(i)
}
Page(pageData)b) .json
{
"navigationBarTitleText": "slider"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'slider'}}"/> <view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">设置step</view>
<view class="body-view">
<slider value="60" bindchange="slider2change" step="5"/>
</view>
</view> <view class="page-section page-section-gap">
<view class="page-section-title">显示当前value</view>
<view class="body-view">
<slider value="50" bindchange="slider3change" show-value/>
</view>
</view> <view class="page-section page-section-gap">
<view class="page-section-title">设置最小/最大值</view>
<view class="body-view">
<slider value="100" bindchange="slider4change" min="50" max="200" show-value/>
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
@import "../../../common/lib/weui.wxss";
button{
margin-bottom: 30rpx;
}
button:last-child{
margin-bottom:;
}
.page-section-title{
padding:;
}
.swiper-item{
display: block;
height: 150px;
}
.page-section-title{
margin-top: 60rpx;
position: relative;
}
.info{
position: absolute;
right:;
color: #353535;
font-size: 30rpx;
}
.page-foot{
margin-top: 50rpx;
}e)
9、switch
a) .js
Page({
switch1Change: function (e){
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
},
switch2Change: function (e){
console.log('switch2 发生 change 事件，携带值为', e.detail.value)
}
})b) .json
{
"navigationBarTitleText": "switch"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'switch'}}"/> <view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">默认样式</view>
<view class="body-view">
<switch checked bindchange="switch1Change"/>
<switch bindchange="switch2Change"/>
</view>
</view> <view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">开启中</view>
<view class="weui-cell__ft">
<switch checked />
</view>
</view>
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">关闭</view>
<view class="weui-cell__ft">
<switch />
</view>
</view>
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
@import "../../../common/lib/weui.wxss";
e)
10、textarea
a) .js
Page({
data: {
focus: false
},
bindTextAreaBlur: function(e) {
console.log(e.detail.value)
}
})b) .json
{
"navigationBarTitleText": "textarea"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'textarea'}}"/> <view class="page-body">
<view class="page-section">
<view class="page-section-title">输入区域高度自适应，不会出现滚动条</view>
<view class="textarea-wrp">
<textarea bindblur="bindTextAreaBlur" auto-height />
</view>
</view> <view class="page-section">
<view class="page-section-title">这是一个可以自动聚焦的textarea</view>
<view class="textarea-wrp">
<textarea auto-focus="true" style="height: 3em" />
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
textarea {
width: 700rpx;
padding: 25rpx 0;
}
.textarea-wrp {
padding: 0 25rpx;
background-color: #fff;
}e)
11、
| 5. ./pages/nav 导航返回顶部 |
0、
1、navigator
-navigate
a) .js
Page({
onLoad: function(options) {
console.log(options)
this.setData({
title: options.title
})
}
})b) .json
{
"navigationBarTitleText": "navigatePage"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: '新建的页面'}}"/>
</view>
d) .wxss
-navigator
a) .js
Page({})b) .json
{
"navigationBarTitleText": "navigator"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'navigator'}}"/> <view class="page-body">
<view class="btn-area">
<navigator url="navigate?title=navigate" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
<navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">
<button type="default">在当前页打开</button>
</navigator>
</view>
</view> <template is="foot" />
</view>
d) .wxss
.navigator-hover button{
background-color: #DEDEDE;
}
.other-navigator-hover button{
background-color: #DEDEDE;
}-redirect
a) .js
Page({
onLoad: function(options) {
console.log(options)
this.setData({
title: options.title
})
}
})b) .json
{
"navigationBarTitleText": "redirectPage"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: '当前页'}}"/>
</view>
d) .wxss
e)
12、
| 6. ./pages/media 媒体组件返回顶部 |
1、image
a) .js
Page({})b) .json
{
"navigationBarTitleText": "image"
}c) .wxml
<import src="../../../common/head.wxml"/>
<import src="../../../common/foot.wxml"/> <view class="container">
<template is="head" data="{{title: 'image'}}"/> <view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">Local Image</view>
<view class="page-section-ctn">
<image class="image" src="../../resources/pic/1.jpg"/>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Internet Image</view>
<view class="page-section-ctn">
<image class="image" src="../../resources/pic/2.jpg"/>
</view>
</view>
</view> <template is="foot"/>
</view>
d) .wxss
.page-section-ctn {
text-align: center;
}
.image {
margin-top: 30rpx;
width: 580rpx;
height: 208rpx;
}e)
2、audio
a) .js
Page({
data: {
current: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此时此刻',
author: '许巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
},
audioAction: {
method: 'pause'
}
}
})b) .json
{
"navigationBarTitleText": "audio"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'audio'}}"/> <view class="page-body">
<view class="page-section page-section-gap" style="text-align: center;">
<audio style="text-align: left" src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" controls></audio>
</view>
</view> <template is="foot" />
</view>
d) .wxss
e)
3、video
a) .js
function getRandomColor () {
const rgb = []
for (let i = 0 ; i < 3; ++i){
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '',
data: {
src: '',
danmuList:
[{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
},
bindInputBlur: function(e) {
this.inputValue = e.detail.value
},
bindButtonTap: function() {
var that = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: ['front','back'],
success: function(res) {
that.setData({
src: res.tempFilePath
})
}
})
},
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
},
videoErrorCallback: function(e) {
console.log('视频错误信息:')
console.log(e.detail.errMsg)
}
})b) .json
{
"navigationBarTitleText": "video"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'video'}}"/> <view class="page-body">
<view class="page-section tc">
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video> <view class="weui-cells">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">弹幕内容</view>
</view>
<view class="weui-cell__bd">
<input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
</view>
</view>
<view class="btn-area">
<button bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button>
</view>
</view>
</view> <template is="foot" />
</view>
d) .wxss
@import "../../../common/lib/weui.wxss";
.weui-cells{
margin-top: 80rpx;
text-align: left;
}
.weui-label{
width: 5em;
}e)
4、
| 7. ./pages/map 地图返回顶部 |
1、map
a) .js
Page({
data: {
latitude: 23.099994,
longitude: 113.324520,
markers: [{
latitude: 23.099994,
longitude: 113.324520,
name: 'T.I.T 创意园'
}],
covers: [{
latitude: 23.099994,
longitude: 113.344520,
iconPath: '/image/location.png'
}, {
latitude: 23.099994,
longitude: 113.304520,
iconPath: '/image/location.png'
}]
}
})b) .json
{
"navigationBarTitleText": "map"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'map'}}"/> <view class="page-body">
<view class="page-section page-section-gap">
<map
style="width: 100%; height: 300px;"
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
covers="{{covers}}"
>
</map>
</view>
</view> <template is="foot" />
</view>
d) .wxss
e)
2、
| 8. ./pages/canvas 画布返回顶部 |
1、canvas
a) .js
Page({
onReady: function () {
this.position = {
x: 150,
y: 150,
vx: 2,
vy: 2
}
this.drawBall()
this.interval = setInterval(this.drawBall, 17)
},
drawBall: function () {
var p = this.position
p.x += p.vx
p.y += p.vy
if (p.x >= 300) {
p.vx = -2
}
if (p.x <= 7) {
p.vx = 2
}
if (p.y >= 300) {
p.vy = -2
}
if (p.y <= 7) {
p.vy = 2
}
var context = wx.createContext()
function ball(x, y) {
context.beginPath(0)
context.arc(x, y, 5, 0, Math.PI * 2)
context.setFillStyle('#1aad19')
context.setStrokeStyle('rgba(1,1,1,0)')
context.fill()
context.stroke()
}
ball(p.x, 150)
ball(150, p.y)
ball(300 - p.x, 150)
ball(150, 300 - p.y)
ball(p.x, p.y)
ball(300 - p.x, 300 - p.y)
ball(p.x, 300 - p.y)
ball(300 - p.x, p.y)
wx.drawCanvas({
canvasId: 'canvas',
actions: context.getActions()
})
},
onUnload: function () {
clearInterval(this.interval)
}
})b) .json
{
"navigationBarTitleText": "canvas"
}c) .wxml
<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" /> <view class="container">
<template is="head" data="{{title: 'canvas'}}"/> <view class="page-body">
<view class="page-body-wrapper">
<canvas canvas-id="canvas" class="canvas"></canvas>
</view>
</view> <template is="foot" />
</view>
d) .wxss
.canvas {
width: 305px;
height: 305px;
background-color: #fff;
}e)
2、
| 9.返回顶部 |
| 10.返回顶部 |
0、
1、
| 11.返回顶部 |
| 作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |