Поиск еды
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给抛弃了，毕竟根本还是小程序呀
所有，我觉得最好的方式是，在开发中结合小程序文档一起进行
一起，共勉加油！！！
Скриншот исходного кода:
иллюстрировать
Если этот проект полезен для вас, пожалуйста, поставьте лайк, подпишитесь и поддержите. Спасибо~
Чтобы получить исходный код, подпишитесь на паблик-аккаунт «Coder Park» и ответьте [исходный код uniapp]
