贝壳房源小程序

小小月雨
366 阅读2分钟

贝壳房源小程序

页面展示

image.png image.png image.png image.png image.png

猜你喜欢上拉数据刷新及节流

思路: 利用页面懒加载,先更新第一页的数据,使用小程序的onReachBottom生命周期去进行节流操作,在用户上划至底部时再获取下一页数据,达到性能优化的效果

页面展示

image.png image.png

代码截图

image.png

  1. 在methods中定义请求数据的方法,处理数据格式,然后将得到的结果push到数组的中;
  2. 然后在onReachBottom生命周期中进行页码+1操作,然后再次进行数据请求;
  3. 最后通过判断返回数据的数组长度是否等于0,如果等于0则不再进行数据请求,节省不必要的性能消耗.

uni-app获取当前地址

思路 : 跟微信小程序一样,在onLoad生命周期中进行uni.getLocation的调用,然后通过高德地图提供的请求地址进行城市的展示,注意要在微信小程序中运行getLocation,需要做以下几个配置:

1.在manifest.json中找到微信小程序,配置微信小程序appid,并勾选位置接口选项

image.png

2.然后在源码视图中,配置小程序特有相关的代码,完成以上两步才能在微信小程序中正常获取用户地址!!

image.png

页面展示

image.png

代码截图

image.png

uni-app组件封装

组件 : 当页面结构某些部分样式相同时,将相同样式提取出来封装成功能唯一的组件,以便复用,优化代码

思路 : 通过props接收父组件传递的数据,然后渲染到子组件的标签中,需要注意的是由于父组件是异步请求的数据,时间会比较长,因此需要在父组件的子组件标签上进行v-if判断,判断需要传递的数据是否有值,再进行传递!

房屋组件封装

image.png

代码截图

image.png

处理全国城市列表

思路 :

  1. 请求接口,将返回数据中的每个城市的拼音首字母返回成一个新的数组;
  2. 将所有城市的拼音首字母转换成大写,然后对该新的数组进行排序,渲染到页面上
  3. 然后定义个函数,这个函数传入城市的首字母进行筛选,将满足条件的返回
  4. 进行循环渲染到页面上

页面展示

image.png

代码截图

image.png

image.png

avatar
文章
阅读
粉丝