### button標簽
按鈕
示例代碼：
wxss:
/** wxss **/
/** 修改button默認的點擊態樣式類**/
.button-hover {
background-color: red;
}
/** 添加自定義button點擊態樣式類**/
.other-button-hover {
background-color: blue;
}
wxml:
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">點擊設置以上按鈕disabled屬性</button>
<button bindtap="setPlain">點擊設置以上按鈕plain屬性</button>
<button bindtap="setLoading">點擊設置以上按鈕loading屬性</button>
<button open-type="contact">進入客服會話</button>
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)
### checkbox-group標簽
### checkbox標簽
示例：
wxml:
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
js:
Page({
data: {
items: [
{name: 'USA', value: '美國'},
{name: 'CHN', value: '中國', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英國'},
{name: 'TUR', value: '法國'},
]
},
checkboxChange: function(e) {
console.log('checkbox發生change事件，攜帶value值為：', e.detail.value)
}
})
### form標簽
示例代碼：
wxml:
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section section_gap">
<view class="section__title">switch</view>
<switch name="switch"/>
</view>
<view class="section section_gap">
<view class="section__title">slider</view>
<slider name="slider" show-value ></slider>
</view>
<view class="section">
<view class="section__title">input</view>
<input name="input" placeholder="please input here" />
</view>
<view class="section section_gap">
<view class="section__title">radio</view>
<radio-group name="radio-group">
<label><radio value="radio1"/>radio1</label>
<label><radio value="radio2"/>radio2</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>checkbox1</label>
<label><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
js:
Page({
formSubmit: function(e) {
console.log('form發生了submit事件，攜帶數據為：', e.detail.value)
},
formReset: function() {
console.log('form發生了reset事件')
}
})
### input標簽
示例代碼：
wxml:
<!--input.wxml-->
<view class="section">
<input placeholder="這是一個可以自動聚焦的input" auto-focus/>
</view>
<view class="section">
<input placeholder="這個只有在按鈕點擊的時候才聚焦" focus="{{focus}}" />
<view class="btn-area">
<button bindtap="bindButtonTap">使得輸入框獲取焦點</button>
</view>
</view>
<view class="section">
<input maxlength="10" placeholder="最大輸入長度10" />
</view>
<view class="section">
<view class="section__title">你輸入的是：{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="輸入同步到view中"/>
</view>
<view class="section">
<input bindinput="bindReplaceInput" placeholder="連續的兩個1會變成2" />
</view>
<view class="section">
<input password type="number" />
</view>
<view class="section">
<input password type="text" />
</view>
<view class="section">
<input type="digit" placeholder="帶小數點的數字鍵盤"/>
</view>
<view class="section">
<input type="idcard" placeholder="身份證輸入鍵盤" />
</view>
<view class="section">
<input placeholder-style="color:red" placeholder="占位符字體是紅色的" />
</view>
js:
//input.js
Page({
data: {
focus: false,
inputValue: ''
},
bindButtonTap: function() {
this.setData({
focus: true
})
},
bindKeyInput: function(e) {
this.setData({
inputValue: e.detail.value
})
},
bindReplaceInput: function(e) {
var value = e.detail.value
var pos = e.detail.cursor
if(pos != -1){
//光標在中間
var 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'),
}
})
Bug & Tip
bug : 微信版本 6.3.30, focus 屬性設置無效；
bug : 微信版本 6.3.30, placeholder 在聚焦時出現重影問題；
tip : input 組件是一個 native 組件，字體是系統字體，所以無法設置 font-family；
tip : 在 input 聚焦期間，避免使用 css 動畫；
### label標簽
示例代碼：
wxml:
<view class="section section_gap">
<view class="section__title">表單組件在label內</view>
<checkbox-group class="group" bindchange="checkboxChange">
<view class="label-1" wx:for="{{checkboxItems}}">
<label>
<checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
<view class="label-1__icon">
<view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
</view>
<text class="label-1__text">{{item.value}}</text>
</label>
</view>
</checkbox-group>
</view>
<view class="section section_gap">
<view class="section__title">label用for標識表單組件</view>
<radio-group class="group" bindchange="radioChange">
<view class="label-2" wx:for="{{radioItems}}">
<radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
<view class="label-2__icon">
<view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
</view>
<label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
</view>
</radio-group>
</view>
js:
Page({
data: {
checkboxItems: [
{name: 'USA', value: '美國'},
{name: 'CHN', value: '中國', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本', checked: 'true'},
{name: 'ENG', value: '英國'},
{name: 'TUR', value: '法國'},
],
radioItems: [
{name: 'USA', value: '美國'},
{name: 'CHN', value: '中國', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英國'},
{name: 'TUR', value: '法國'},
],
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)
}
})
wxss:
.label-1, .label-2{
margin-bottom: 15px;
}
.label-1__text, .label-2__text {
display: inline-block;
vertical-align: middle;
}
.label-1__icon {
position: relative;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
background: #fcfff4;
}
.label-1__icon-checked {
position: absolute;
top: 3px;
left: 3px;
width: 12px;
height: 12px;
background: #1aad19;
}
.label-2__icon {
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 18px;
height: 18px;
background: #fcfff4;
border-radius: 50px;
}
.label-2__icon-checked {
position: absolute;
left: 3px;
top: 3px;
width: 12px;
height: 12px;
background: #1aad19;
border-radius: 50%;
}
.label-4_text{
text-align: center;
margin-top: 15px;
}
### picker標簽
示例代碼：
wxml:
<view class="section">
<view class="section__title">普通選擇器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
當前選擇：{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">多列選擇器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
當前選擇：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">時間選擇器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
當前選擇: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">日期選擇器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
當前選擇: {{date}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">省市區選擇器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
當前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>
js:
Page({
data: {
array: ['美國', '中國', '巴西', '日本'],
objectArray: [
{
id: 0,
name: '美國'
},
{
id: 1,
name: '中國'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
multiArray: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環節動物', '軟體動物', '節肢動物'], ['豬肉絳蟲', '吸血蟲']],
objectMultiArray: [
[
{
id: 0,
name: '無脊柱動物'
},
{
id: 1,
name: '脊柱動物'
}
], [
{
id: 0,
name: '扁性動物'
},
{
id: 1,
name: '線形動物'
},
{
id: 2,
name: '環節動物'
},
{
id: 3,
name: '軟體動物'
},
{
id: 3,
name: '節肢動物'
}
], [
{
id: 0,
name: '豬肉絳蟲'
},
{
id: 1,
name: '吸血蟲'
}
]
],
multiIndex: [0, 0, 0],
date: '2016-09-01',
time: '12:01',
region: ['廣東省', '廣州市', '海珠區'],
customItem: '全部'
},
bindPickerChange: function(e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindMultiPickerChange: function (e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列為', e.detail.column, '，值為', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性動物', '線形動物', '環節動物', '軟體動物', '節肢動物'];
data.multiArray[2] = ['豬肉絳蟲', '吸血蟲'];
break;
case 1:
data.multiArray[1] = ['魚', '兩棲動物', '爬行動物'];
data.multiArray[2] = ['鯽魚', '帶魚'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['豬肉絳蟲', '吸血蟲'];
break;
case 1:
data.multiArray[2] = ['蛔蟲'];
break;
case 2:
data.multiArray[2] = ['螞蟻', '螞蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蝸牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆蟲', '甲殼動物', '蛛形動物', '多足動物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鯽魚', '帶魚'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃魚'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龜', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
bindDateChange: function(e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
date: e.detail.value
})
},
bindTimeChange: function(e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
time: e.detail.value
})
},
bindRegionChange: function (e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
### picker-view標簽
picker-view-column
僅可放置于<picker-view />中，其孩子節點的高度會自動設置成與picker-view的選中框的高度一致
示例代碼：
wxml:
<view>
<view>{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
js:
const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1 ; i <= 12; i++) {
months.push(i)
}
for (let i = 1 ; i <= 31; i++) {
days.push(i)
}
Page({
data: {
years: years,
year: date.getFullYear(),
months: months,
month: 2,
days: days,
day: 2,
year: date.getFullYear(),
value: [9999, 1, 1],
},
bindChange: function(e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]]
})
}
})
Tips
tip: 滾動時在iOS自帶振動反饋，可在系統設置 -> 聲音與觸感 -> 系統觸感反饋中關閉
### radio標簽
示例代碼：
wxml:
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
js:
Page({
data: {
items: [
{name: 'USA', value: '美國'},
{name: 'CHN', value: '中國', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英國'},
{name: 'TUR', value: '法國'},
]
},
radioChange: function(e) {
console.log('radio發生change事件，攜帶value值為：', e.detail.value)
}
})
### slider標簽
示例代碼：
wxml:
<view class="section section_gap">
<text class="section__title">設置step</text>
<view class="body-view">
<slider bindchange="slider2change" step="5"/>
</view>
</view>
<view class="section section_gap">
<text class="section__title">顯示當前value</text>
<view class="body-view">
<slider bindchange="slider3change" show-value/>
</view>
</view>
<view class="section section_gap">
<text class="section__title">設置最小/最大值</text>
<view class="body-view">
<slider bindchange="slider4change" min="50" max="200" show-value/>
</view>
</view>
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)
### switch標簽
示例代碼：
wxml:
<view class="body-view">
<switch checked bindchange="switch1Change"/>
<switch bindchange="switch2Change"/>
</view>
js:
Page({
switch1Change: function (e){
console.log('switch1 發生 change 事件，攜帶值為', e.detail.value)
},
switch2Change: function (e){
console.log('switch2 發生 change 事件，攜帶值為', e.detail.value)
}
})
### textarea標簽
示例代碼：
wxml:
<!--textarea.wxml-->
<view class="section">
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自動變高" />
</view>
<view class="section">
<textarea placeholder="placeholder顏色是紅色的" placeholder-style="color:red;" />
</view>
<view class="section">
<textarea placeholder="這是一個可以自動聚焦的textarea" auto-focus />
</view>
<view class="section">
<textarea placeholder="這個只有在按鈕點擊的時候才聚焦" focus="{{focus}}" />
<view class="btn-area">
<button bindtap="bindButtonTap">使得輸入框獲取焦點</button>
</view>
</view>
<view class="section">
<form bindsubmit="bindFormSubmit">
<textarea placeholder="form 中的 textarea" name="textarea"/>
<button form-type="submit"> 提交 </button>
</form>
</view>
js:
//textarea.js
Page({
data: {
height: 20,
focus: false
},
bindButtonTap: function() {
this.setData({
focus: true
})
},
bindTextAreaBlur: function(e) {
console.log(e.detail.value)
},
bindFormSubmit: function(e) {
console.log(e.detail.value.textarea)
}
})
Bug & Tip
bug: 微信版本 6.3.30，textarea 在列表渲染時，新增加的 textarea 在自動聚焦時的位置計算錯誤。
tip: textarea 的 blur 事件會晚于頁面上的 tap 事件，如果需要在 button 的點擊事件獲取 textarea，可以使用 form 的 bindsubmit。
tip: 不建議在多行文本上對用戶的輸入進行修改，所以 textarea 的 bindinput 處理函數并不會將返回值反映到 textarea 上。
tip: textarea 組件是由客戶端創建的原生組件，它的層級是最高的，不能通過 z-index 控制層級。
tip: 請勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 組件。
tip: css 動畫對 textarea 組件無效。
- 商城api接口
- 首頁數據獲取
- 分類接口
- 購物車接口
- 商品信息接口
- 搜索接口
- 訂單列表接口
- 店鋪接口
- 收藏接口
- 收貨地址接口
- 生成訂單接口
- 支付接口
- 會員中心接口
- 登錄注冊接口
- 關于我們
- 圖片上傳
- 分銷中心
- 分銷明細
- 代金券
- 平臺紅包列表
- 分銷申請列表
- 我的推廣
- 微信小程序
- 簡介
- 開發前準備
- 目錄結構介紹
- 發起請求
- 網絡請求提交表單
- 代碼及開發所遇到問題總結
- 導航跳轉時所遇到的問題
- 緩存數據與數據取得的問題
- 如何引入外部css
- 如何定義與使用全局變量
- 如何定義新的界面
- 微信小程序支付
- 小程序的手機驗證碼登錄
- 上傳，下載
- 提示框
- app.json配置
- 配置demo
- pages
- window
- tabBar
- networkTimeout
- debug
- page.json
- 緩存
- 特效
- 滑動方式
- 城市切換
- 五星好評
- Switch
- 上拉加載
- wxml 標簽
- 視圖容器
- 基礎內容
- 表單組件
- 導航
- 媒體組件
- 自定義提示框
- 小程序內訪問網頁
- 倒計時顯示
- 微信小程序，如何在返回前一個頁面時，執行前一個頁面的方法
- 在本地可以請求到數據，但手機上是請求不到的
- curl請求失敗
- 代碼同步
- 短信平臺更換