微信小程序简易全攻略《三》创建轮播图与数据请求，表单的创建、提交、与接收 ...

一：建立轮播图

应用领域中最常用的就是轮播图了，今儿个就谈谈微信小程序中轮播图的采用

轮播图，不外乎俩个要素，重定向链接 和 图片地址

1. 设置数据

我在 pages/test/test.js中嵌入如下数据

//test.js

//以获取应用领域实例

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 就是我们轮播图中将要使用的 图片地址和 重定向链接

indicatgorRots 与否发生焦点

autoplay 与否自动播放

interval 自动播放间隔时间

duration 滑动动画时间

更多样式编辑恳请参见文档 https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1475052054228

2. 部署至页面

找出 文件 pages/test/test.wxml

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

特别注意： swiper 千万不要在外面 加之任何标签 比如 之类的 ，如果提了可能会引致轮播图没人

3. 嵌入页面样式

建立文件 pages/test/test.wxss

.slide-image{

width: 100%;

}

加之上面的样式可以并使 轮播图的宽度达至100% 然后更可爱点，当然可以根据自己的偏好罗！

看看效果

二：数据命令 表单的建立 递交 与发送

已经开始正题了，本节小小研究了有 微信小程序的表单建立与递交

先看一看效果

1. 表单页面

{{notice_str}}

证实递交么？

提示信息

清空顺利

2. js 代码

var app = getApp();

Page({

data:{

// text:"这就是一个页面"

array:["中国","美国","巴西","日本"],

toast1Hidden:true,

modalHidden: true,

modalHidden2: true,

notice_str: '',

index:0

},

toast1Change:function(e){

this.setData({toast1Hidden:true});

},

//弹头出来证实侧边

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传送挑选发生改变，随身携带值', e.detail.value)

this.setData({

index: e.detail.value

})

},

onLoad:function(options){

// 页面初始化 options为页面重定向所增添的参数

},

onReady:function(){

// 页面图形顺利完成

},

onShow:function(){

// 页面表明

},

onHide:function(){

// 页面暗藏

},

onUnload:function(){

// 页面停用

},

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出现了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. 服务器端

var_dump($_REQUEST);

本节 子集了

表单 https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html?t=1476197486816

数据命令 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

证实和非证实侧边 https://mp.weixin.qq.com/debug/wxadoc/dev/component/modal.html?t=1476197489278

以及有关表单 的信息 ， 之后将水解传授 对应的小功能。