首页 > 小程序教程 > 微信小程序个人地址管理信息添加设计制作开发教程

微信小程序个人地址管理信息添加设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序个人地址管理信息添加设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container edit_wrap">
<form bindsubmit="submitForm" id="123">
    <view class="form_group">
        <text>姓名:</text>
        <input type="text" placeholder="请输入预约姓名" placeholder-class="placeholder_style" name="data_name" value="{{data_name}}" />
    </view>
    <view class="form_group">
        <text>电话:</text>
        <input type="text" placeholder="请输入预约电话" placeholder-class="placeholder_style" name="data_phone" value="{{data_phone}}"/>
    </view>
    <view class="form_group">
        <text></text>
        <input type="text" class="sendmsg_input"/>
        <button  loading="{{loading}}">发送验证码</button>
    </view>
    <view class="form_group">
        <text>省:</text>
        <picker bindchange="bindProviPickerChange" value="{{proviIndex}}" range="{{province}}" name="data_province" value="{{data_province}}">
            <view>{{province[proviIndex]}}</view>
        </picker>
    </view>
    <view class="form_group">
        <text>市:</text>
        <picker bindchange="bindCityPickerChange" value="{{cityIndex}}" range="{{city}}" name="data_city" value="{{data_city}}">
            <view>{{city[cityIndex]}}</view>
        </picker>
    </view>
    <view class="form_group">
        <text>地址:</text>
        <input type="text" placeholder="请输入预约地址" placeholder-class="placeholder_style" name="data_addr" value="{{data_addr}}"/>
    </view>
    <button class="save_btn"  formType="submit">保存</button>
    <toast hidden="{{saveToastHidden}}" bindchange="hideToast">
    保存成功
    </toast>
</form>
</view>
 
二、wxss样式文件代码如下:
.edit_wrap{
    font-size:30rpx;
    padding:60rpx 0rpx 20rpx;
}
.form_group{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    margin:20rpx;
    line-height: 60rpx;
}
.form_group text{
    text-align: right;
    width:100rpx;
}
.form_group input,
.form_group picker{
    width:460rpx;
    border:1px solid #ddd;
    border-radius:8rpx;
    height:60rpx;
    line-height: 60rpx;
    padding:0rpx 20rpx;
}
.form_group .sendmsg_input{
    width:290rpx;
    margin-right:14rpx;
}
.form_group button{
    font-size:30rpx;
    height:60rpx;
    line-height: 60rpx;
    border:1px dotted #fff;
    background:white;
    padding:0rpx;
    margin:0rpx;
    outline:none;
    color:#000;
}
.placeholder_style{
    font-family:'微软雅黑';
    color:#adadad;
}
.save_btn{
    width:600rpx;
    background:#d24a58;
    font-size: 32rpx;
    color:#fff;
    border-radius: 0rpx;
    margin:40rpx 0rpx 10rpx;
}
三、js页面代码如下:
var myData = require("../../utils/data")

Page({
    data:{
        province:myData.provinceData(),
        city:myData.cityData(),
        proviIndex:0,
        cityIndex:0,
        saveToastHidden:true
    },
    onLoad:function(options){
        var init = myData.searchAddrFromAddrs(options.addrid)
        this.setData({
            data_name:init.name,
            data_phone:init.phone,
            data_province:init.province,
            data_city:init.city,
            data_addr:init.addr
        })
    },
    // 省份选择
    bindProviPickerChange : function(e){
        console.log('province  picker发送选择改变,携带值为', e.detail.value)
        this.setData({
            proviIndex:e.detail.value
        })
    },
    // 城市选择
    bindCityPickerChange : function(e){
        console.log('city  picker发送选择改变,携带值为', e.detail.value)
        this.setData({
            cityIndex:e.detail.value
        })
    },
    submitForm:function(e){
        console.log('保存成功')
        this.setData({
            saveToastHidden:false
        })
    },
    hideToast:function(){
        this.setData({
            saveToastHidden:true
        })
    }
    
})

模板简介:该模板名称为【微信小程序个人地址管理信息添加设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 21,187次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-10
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信模板 html5 表格式简历模板 企业网站 微信文章 响应式 单页式简历模板 Bootstrap 自适应 微信公众平台
您可能会喜欢的其他模板