亚洲国产一区二区三区精品,2021亚洲人成在线无码

微信小程序簡(jiǎn)易全攻略《三》創(chuàng)建輪播圖與數(shù)據(jù)請(qǐng)求，表單的創(chuàng)建、提交、與接收 ...

時(shí)間：2016-10-20 15:04:00

一：創(chuàng)建輪播圖

應(yīng)用中最常見(jiàn)的就是輪播圖了，今兒個(gè)就講講微信小程序中輪播圖的使用

輪播圖，不外乎倆個(gè)要素，跳轉(zhuǎn)鏈接和圖片地址

1. 設(shè)置數(shù)據(jù)

我在 pages/test/test.js中添加如下數(shù)據(jù)

//test.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
imgUrls: [
{
link:'/pages/index/index',
url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
},{
link:'/pages/logs/logs',
url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
},{
link:'/pages/test/test',
url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
}
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
userInfo: {}
},
onLoad: function () {
console.log('onLoad test');
}
})

其中 imgUrls 是我們輪播圖中將要用到的圖片地址和跳轉(zhuǎn)鏈接

indicatgorRots 是否出現(xiàn)焦點(diǎn)

autoplay 是否自動(dòng)播放

interval 自動(dòng)播放間隔時(shí)間

duration 滑動(dòng)動(dòng)畫(huà)時(shí)間

更多樣式編輯請(qǐng)參看文檔 https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1475052054228

2. 部署到頁(yè)面

找到文件 pages/test/test.wxml

<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<navigator url="{{item.link}}" hover-class="navigator-hover">
<image src="{{item.url}}" class="slide-image" width="355" height="150"/>
</navigator>
</swiper-item>
</block>
</swiper>

注意： swiper 千萬(wàn)不要在外面加上任何標(biāo)簽例如 <view> 之類的，如果加了可能會(huì)導(dǎo)致輪播圖出不來(lái)

3. 添加頁(yè)面樣式

創(chuàng)建文件 pages/test/test.wxss

.slide-image{
width: 100%;
}

加上上面的樣式可以使輪播圖的寬度達(dá)到100% 然后更漂亮點(diǎn)，當(dāng)然可以根據(jù)自己的喜好羅！

看效果

二：數(shù)據(jù)請(qǐng)求表單的創(chuàng)建提交與接收

開(kāi)始正題了，本節(jié)小小研究了下微信小程序的表單創(chuàng)建與提交

先看看效果

1. 表單頁(yè)面

<view id="adduser">
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section">
<view class="section__title">姓名:</view>
<view class='form-group'>
<input type="text" class="input-text" name="username" placeholder="請(qǐng)輸入姓名" />
</view>
</view>
<view class="section section_gap">
<view class="section__title">年齡:</view>
<view class='form-group'>
<slider name="age" show-value ></slider>
</view>
</view>
<view class="section section_gap">
<view class="section__title">性別:</view>
<view class='form-group'>
<radio-group name="gender">
<label><radio value="1"/>男</label>
<label><radio value="0"/>女</label>
</radio-group>
</view>
</view>
<view class="section">
<view class="section__title">地區(qū)選擇:</view>
<view class='form-group'>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
<input type="hidden" disabled="true" name="addr" value="{{array[index]}}"/>
</view>
</picker>
</view>
</view>
<view class="section section_gap">
<view class="section__title">愛(ài)好:</view>
<view class='form-group'>
<checkbox-group name="hobby">
<label><checkbox value="羽毛球"/>羽毛球</label>
<label><checkbox value="游泳"/>游泳</label>
</checkbox-group>
</view>
</view>

<view class="section section_gap">
<view class="section__title">是否顯示:</view>
<view class='form-group'>
<switch name="isshow"/>
</view>
</view>
<view class="section btn-area">
<button formType="submit">提交</button>
<button formType="reset">清空</button>
</view>
</form>


<toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
{{notice_str}}
</toast>

<view class="page__bd">
<modal title="確認(rèn)" confirm-text="確定" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="confirm_one" bindcancel="cancel_one">
確認(rèn)提交么？
</modal>
<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2" bindcancel="modalChange2">
<view> 提示 </view>
<view> 清空成功 </view>
</modal>
</view>
</view>

2. js 代碼

var app = getApp();
Page({
data:{
// text:"這是一個(gè)頁(yè)面"
array:["中國(guó)","美國(guó)","巴西","日本"],
toast1Hidden:true,
modalHidden: true,
modalHidden2: true,
notice_str: '',
index:0
},
toast1Change:function(e){
this.setData({toast1Hidden:true});
},
//彈出確認(rèn)框
modalTap: function(e) {
this.setData({
modalHidden: false
})
},
confirm_one: function(e) {
console.log(e);
this.setData({
modalHidden: true,
toast1Hidden:false,
notice_str: '提交成功'
});
},
cancel_one: function(e) {
console.log(e);
this.setData({
modalHidden: true,
toast1Hidden:false,
notice_str: '取消成功'
});
},
//彈出提示框
modalTap2: function(e) {
this.setData({
modalHidden2: false
})
},
modalChange2: function(e) {
this.setData({
modalHidden2: true
})
},
bindPickerChange: function(e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
index: e.detail.value
})
},
onLoad:function(options){
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
},
onReady:function(){
// 頁(yè)面渲染完成
},
onShow:function(){
// 頁(yè)面顯示
},
onHide:function(){
// 頁(yè)面隱藏
},
onUnload:function(){
// 頁(yè)面關(guān)閉
},
formSubmit: function(e) {
var that = this;
var formData = e.detail.value;
wx.request({
url: 'http://test.com:8080/test/socket.php?msg=2',
data: formData,
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data)
that.modalTap();
}
})
},
formReset: function() {
console.log('form發(fā)生了reset事件');
this.modalTap2();
}
})

3. 部分樣式

#adduser{
background: #f5f5f5;
}
.section__title{
float: left;
width:30%;
}
.form-group{
float: right;
width: 70%;
}
.section{
clear: both;
width:90%;
margin: 2rem auto;
}
.input-text{
border: 1px solid #ddd;
}
.button{
border: 1px solid #1aad19;
border-radius: 2px;
}
.picker{
padding: 13px;
background-color: #FFFFFF;
}

4. 服務(wù)器端

<?php
var_dump($_REQUEST);

本節(jié) 集合了
表單 https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html?t=1476197486816
數(shù)據(jù)請(qǐng)求 https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html?t=1476197484427

提示框 https://mp.weixin.qq.com/debug/wxadoc/dev/component/toast.html?t=1476197486420

確認(rèn)和非確認(rèn)框 https://mp.weixin.qq.com/debug/wxadoc/dev/component/modal.html?t=1476197489278

以及相關(guān)表單的信息，之后將分解講解對(duì)應(yīng)的小功能。

微信小程序簡(jiǎn)易全攻略《四》模板條件列表渲染完成模擬公眾號(hào)自動(dòng)回復(fù) ...