uniapp、微信小程序美食搜索（附源码）

美食搜索

mpvue 初次尝鲜

主要有三小个功能

上拉加载，下拉刷新

...
onPullDownRefresh () {
  ...
},
onReachBottom () {
  ...
}，
data () {
  ...
}
...
为什么把这个摘出来，因为这两个可以直接用在生命周期里面

---

搜索

<template>
  <div class="index">
      <div class = "app" id = "app" style="{height: '12.68rem', overflow: 'auto'}">
        	<div class = "home">
            	<div class = "home-search">
            	    <i class = "iconfont icon-search"></i>
                <input type = "text" v-model = "value" placeholder = "搜索餐厅"/>
            	</div>
            <div class = "home-search-btn" @click = "search">搜索</div>
        </div>
        <div class = "home-content">
        	    <p class = "nodata" v-if = "homeArr.length === 0 ">暂无数据</p>
        	    <div @click="goMerchant(item)" v-for = "(item ,index) in homeArr" :key = "index">
        	    	  <HomeBox :obj = "item"></HomeBox>
        	    </div>
      	</div>
    </div>
  </div>
</template>

<template>
	<div class = "homeBox">
      	<img class = "homeImg" :src = "obj.pic" alt = "店图" />
        <div class = "homeBox-content">
            <div class = "homeBox-content-name">{{ obj.name }}</div>
            <div class = "homeBox-content-rate">
                <!--<Rate style = {{ fontSize: 12 }} disabled defaultValue={this.props.homeArr.rate} />-->
                <span v-if = "obj.price">￥{{ obj.price }}/人</span>
                <span else>暂无均价信息</span>
            </div>
            <div class = "homeBox-content-type"> 
                <span>{{ obj.type }}</span>
            </div>
        </div>
    </div>
</template>

---

地图插件

调用原生小程序的组件 <map/>
<template>
	<map class="map" :longitude="longitude" :latitude="latitude" :scale = "28" :markers = "markers"></map>
</template>

<script>
export default {
  mounted () {
    this.longitude = parseFloat(this.$store.state.longitude)
    this.latitude = parseFloat(this.$store.state.latitude)
    this.markers = [{
      iconPath: '../../static/location.png',
      longitude: this.longitude,
      latitude: this.latitude,
      width: 45,
      height: 45
    }]
  },
  data () {
    return {
      longitude: 0,
      latitude: 0,
      markers: []
    }
  }
}
</script>

<style scoped>
.map {
	width: 100vw;
	height: 100vh;
}
</style>

---

注：

我觉得，会vue的上手mpvue难度不大，但是别把原生的小程序组件或者api给抛弃了，毕竟根本还是小程序呀
所有，我觉得最好的方式是，在开发中结合小程序文档一起进行
一起，共勉加油！！！

源码截图：

说明

如果本项目对您有帮助，欢迎 “点赞，关注” 支持一下 谢谢~

源码获取关注公众号「码农园区」，回复 【uniapp源码】