微信小程序快速入门——北榛本地宝（列表）

入门——北榛本地宝（列表）"/>

微信小程序快速入门——北榛本地宝（列表）

一、导航跳转及页面传参

1.新增shoplist页面

2.首页跳转以及传参

二、设置标题以及编译模式

1.挂载上一个页面传过来的参数

2.在onReady函数中设置标题

3.自定义编译模式

三、渲染商铺列表

1.挂载请求参数

2.调用api接口

3.渲染门店页面

4.美化门店页面

/* pages/shoplist/shoplist.wxss */
.shop-item {display: flex;padding: 15rpx;border: 1rpx solid #efefef;border-radius: 8rpx;margin: 15rpx;box-shadow: 1rpx 1rpx 15rpx #ddd;
}.thumb image {width: 250rpx;height: 250rpx;display: block;margin-right: 15rpx;
}.info {display: flex;flex-direction: column;justify-content: space-around;font-size: 24rpx;
}.shop-title {font-weight: bold;
}

四、实现上拉刷新效果

1.实现loading消息提示
展示

隐藏

效果如下

2.配置上拉触底值

当前页数+1、调用api接口

3.配置节流阀
打开

关闭

调用api接口中直接退出

4.判断api数据是否加载完毕

效果如下

五、实现下拉刷新效果

1.开启下拉刷新并美化动画

2.重置数据、重新发起数据请求

3.使用回调函数关闭下拉刷新窗口

传参cb

判断cb

六、使用wxs处理手机号

1.新建tools.wxs

2.编写处理手机号的方法

3.在页面引入并处理手机号

最终页面效果如下