首页 > 小程序教程 > 微信小程小区名称搜索绿色单功能页设计制作开发教程

微信小程小区名称搜索绿色单功能页设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程小区名称搜索绿色单功能页设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
    <view class="section">
        <icon type="search" size="20"/><input bindinput="bindInput" placeholder="请输入小区名称" focus="true" />
    </view>
    <view bindtap="bindSearch" data-keywords="{{i.title}}" data-price="{{i.price}}" class="text_box" wx:for="{{tips}}" wx:for-item="i" wx:key="*this">
        <view class="text_title">{{i.title}}</view>
        <view class="text_info">{{i.address}}</view>
    </view>
</view>
 
二、wxss样式文件代码如下:
.section{
    width: 100%;
    position: relative;
}
.section input{
    width:630rpx;
    margin:5px auto;
    border:1px solid #c3c3c3;
    height:30px;
    border-radius: 3px;
    padding: 0 5px 0 50rpx;
    background:#fff;
}
.section icon{
    position: absolute;top:10rpx;
    left:40rpx;z-index: 100;
}
.text_box{
    padding: 10px 25px;background-color: #fff;
}
.text_title{font-size: 1em}
.text_info{font-size: .8em;color: #666}
三、js页面代码如下:
//获取应用实例
//logs.js
import amapFile from "../../vendor/assets/plugins/amap-wx.js";
import config from "../../etc/config";
import wxapp from "../../vendor/wxapp-client-sdk/index";
var app = getApp();
Page({
    data: {
        tips: {},
        aid:''
    },
    onLoad: function(opt){
        let aid=opt.aid;//区域值
        this.setData({
            aid:aid
        });
        console.log("区域索引值",this.data.aid)
    },
    bindInput: function(e){
        var that = this;
        var keyword = e.detail.value;
        console.log("发送值",{aid:that.data.aid,keyword:keyword})
        wxapp.request({
            url: config.service.searchUrl,
            method: 'GET',
            data:{aid:that.data.aid,keyword:keyword},
            login: true,
            success(res){
                if (res.data.success) {
                    console.log('返回房产的数据',res.data.data)
                    that.setData({
                        tips: res.data.data
                    });
                }
            }
        });
        /*var myAmapFun = new amapFile.AMapWX({key: config.service.gdKey});
        myAmapFun.getInputtips({
            keywords: keywords,
            type:190403,
            city: '郑州',
            success: function(data){
                if(data && data.tips){
                    that.setData({
                        tips: data.tips
                    });
                }
            }
        })*/
    },
    bindSearch: function(e){
        let keywords = e.currentTarget.dataset.keywords;
        let house_price = e.currentTarget.dataset.price;
        console.log("选中的小区",keywords)
        console.log("选中的小区",house_price)
        app.globalData.indexArea.hname=keywords;
        app.globalData.indexArea.hprice=house_price;
        wx.switchTab({
            url: './index'
        })
    }
})


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

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