用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

15

主题

35

帖子

704

积分

特邀嘉宾

积分
704
2017-7-14 10:54:59 黄秀杰 特邀嘉宾 楼主 12944
本帖最后由 黄秀杰 于 2017-7-14 10:58 编辑

效果
技能点1、poi地址选择基础腾讯地图sdk for weapp,可文本搜索
2、回调传值使用WxNotification
3、小程序页面布局与input控件
视频教程小程序->灵动云课堂->视频
代码片段


1、地图
[JavaScript] 纯文本查看 复制代码
qqmapsdk.getSuggestion({
    keyword: keyword,
    region: that.data.city,
    success: function (res) {
        console.log(res);
        // 保存地址数组
        that.setData({
            result: res.data
        });
    }, 
    fail: function(res) {
        console.log(res);
    },
    complete: function(res) {
        console.log(res);
    }
});



2、回传值到上一页面


[JavaScript] 纯文本查看 复制代码
addressTapped: function (e) {
    var title = e.currentTarget.dataset.title;
    // 取出点中的地址,然后使用WxNotification回传给首页
    WxNotificationCenter.postNotificationName("addressSelectedNotification", title);
    wx.navigateBack();
}




3、添加页面布局
[HTML] 纯文本查看 复制代码
<form bindsubmit="add">
	<view class="item group-item">
		<view class="caption">联系人</view>
		<view class="bd linkman">
			<view class="input-container">
				<input name="realname" placeholder="收货人姓名" />
			</view>
			<view class="input-container input-container-radio">
				<radio-group class="radio-group" bindchange="radioChange">
				  <label class="radio">
				    <radio value="1" checked="true" />先生
				  </label>
				  <label class="radio">
				    <radio value="0" />女士
				  </label>
				</radio-group>
			</view>
		</view>
	</view>
	<view class="item">
		<view class="caption">联系电话</view>
		<view class="bd">
			<input type="number" name="mobile" placeholder="收货人电话" />
		</view>
	</view>
	<view class="item group-item">
		<view class="caption">送餐地址</view>
		<view class="bd">
			<view class="input-container">
				<input disabled="disabled" name="area" placeholder="小区/写字楼/学校等" bindtap="selectAddress" value="{{address}}" />
			</view>
			<view class="input-container">
				<input name="address" placeholder="详细地址(如门牌号等)" />
			</view>
		</view>
	</view>
	<button form-type="submit" class="confirm">确认</button>
</form>


相应样式表

[CSS] 纯文本查看 复制代码
/*地址添加*/
page {
	background: #eee;
}

.confirm {
	background: #4cd964;
	color: white;
	margin: 10px;
}

/*每一项*/
.item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 5px 10px;
	border-bottom: 1px solid #ddd;
	background: white;
	margin-left: 0;
	line-height: 40px;
}

/*联系人列特殊处理*/
.group-item {
	align-items: flex-start;
}

.group-item .caption {
	margin-top: 5px;
}

/*input输入控件*/
.item .input-container {
	border-bottom: 1px solid #eee;
	margin: 5px 0;
	padding: 5px 0;
}

.item .input-container:last-child {
	border-bottom: 0;
}

.item .input-container-radio {
	margin: 0;
	padding: 0;
}

/*左侧标签*/
.item .caption {
	width: 25%;
}

/*单选框*/
.radio {
	margin-right: 10px;
}

/*主体内容*/
.item .bd {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/*收件地址*/
.item .bd .address {
	color: #999;
	font-size: 14px;
	margin: 5px 0;
	margin-left: 10px;
}

/*编辑图标*/
.item .ft {
	width: 30px;
	height: 30px;
	margin: 10px;
}

/*.地址列表*/

/*底部添加地址*/
.add-address {
	border-top: 1px solid #eee;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: white;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 0;
}

.add-address .icon {
	width: 16px;
	height: 16px;
	border: 1px solid #09f;
	border-radius: 50%;
	color: #09f;
	text-align: center;
	font-size: 16px;
	line-height: 16px;
	margin-right: 5px;
}

.add-address .caption {
	font-size: 14px;
	color: #09f;
	font-weight: bold;
	margin-left: 5px;
}



源码下载:关注公众号【黄秀杰】,回复112。




路过,学习一下
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
发新帖
    您需要登录后才可以回帖 登录 | 立即注册