美食搜索
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源码】