一:创建轮播图
应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用
轮播图,不外乎俩个要素,跳转链接 和 图片地址
1. 设置数据
我在 pages/test/test.js中添加如下数据
link:'/pages/index/index',
url:'https://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
url:'https://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
url:'https://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
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
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<navigator url="{{item.link}}" hover-class="navigator-hover">
<image src="{{item.url}}" class="slide-image" width="355" height="150"/>
注意: swiper 千万不要在外面 加上任何标签 例如 <view> 之类的 ,如果加了可能会导致轮播图出不来
3. 添加页面样式
创建文件 pages/test/test.wxss
加上上面的样式可以使 轮播图的宽度达到100% 然后更漂亮点,当然可以根据自己的喜好罗!
看效果
二:数据请求 表单的创建 提交 与接收
开始正题了,本节小小研究了下 微信小程序的表单创建与提交
先看看效果
1. 表单页面
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section__title">姓名:</view>
<view class='form-group'>
<input type="text" class="input-text" name="username" placeholder="请输入姓名" />
<view class="section section_gap">
<view class="section__title">年龄:</view>
<view class='form-group'>
<slider name="age" show-value ></slider>
<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>
<view class="section__title">地区选择:</view>
<view class='form-group'>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<input type="hidden" disabled="true" name="addr" value="{{array[index]}}"/>
<view class="section section_gap">
<view class="section__title">爱好:</view>
<view class='form-group'>
<checkbox-group name="hobby">
<label><checkbox value="羽毛球"/>羽毛球</label>
<label><checkbox value="游泳"/>游泳</label>
<view class="section section_gap">
<view class="section__title">是否显示:</view>
<view class='form-group'>
<view class="section btn-area">
<button formType="submit">提交</button>
<button formType="reset">清空</button>
<toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
<modal title="确认" confirm-text="确定" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="confirm_one" bindcancel="cancel_one">
<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2" bindcancel="modalChange2">
2. js 代码
array:["中国","美国","巴西","日本"],
toast1Change:function(e){
this.setData({toast1Hidden:true});
confirm_one: function(e) {
cancel_one: function(e) {
modalChange2: function(e) {
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
formSubmit: function(e) {
var formData = e.detail.value;
url: 'https://test.com:8080/test/socket.php?msg=2',
'Content-Type': 'application/json'
console.log('form发生了reset事件');
3. 部分样式
border: 1px solid #1aad19;
background-color: #FFFFFF;
4. 服务器端
本节 集合了
表单 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
以及相关表单 的信息 , 之后将分解讲解 对应的小功能。
|