烟台网站建设网站推广,国家设计师资格证书,新公司成立建设网站,wordpress使用个人写的页面目录 一、定义请求参数对象二、获取商品列表数据三、渲染商品列表结构四、把商品item封装为自定义组件五、使用过滤器处理价格六、上拉加载更多七、下拉刷新八、点击商品item项跳转到详情页面 这章主要完成商品列表页面的编写#xff1a;位于subpkg分包下的goods_list页面
一… 目录 一、定义请求参数对象二、获取商品列表数据三、渲染商品列表结构四、把商品item封装为自定义组件五、使用过滤器处理价格六、上拉加载更多七、下拉刷新八、点击商品item项跳转到详情页面 这章主要完成商品列表页面的编写位于subpkg分包下的goods_list页面
一、定义请求参数对象
先看一下我们需要用到的后端api接口商品列表搜索
返回结果 现在开始写前端因为向后端发送请求需要4个参数所以我们可以先封装一个对象 scriptexport default {data() {return {// 请求参数对象queryObj: {// 查询关键字query: ,// 商品分类idcid: ,// 页码值pagenum: 1,// 每页显示多少条数据pagesize: 10,}};},onLoad(options) {// 将页面参数转存到 this.queryobj对象中this.queryObj.query options.query || this.queryObj.cid options.cid || }}
/script二、获取商品列表数据 3.在methods中定义getGoodsList方法 methods: {// 获取商品列表方法async getGoodsList() {const {data : res} await uni.request({url: https://api-hmugo-web.itheima.net/api/public/v1/goods/search,data: this.queryObj,method: GET,})if (res.meta.status ! 200) {return uni.showToast({title: 数据请求失败,duration: 1500,icon: none,})}this.goodsList res.message.goodsthis.total res.message.total}}三、渲染商品列表结构
在页面通过v-for指令渲染出商品的UI结构
templateviewview classgoods-listblock v-for(goods, i) in goodsList :keyiview classgoods-item!--左侧盒子--view classgoods-item-leftimage :srcgoods.goods_small_logo classgoods-pic/image/view!--右侧盒子--view classgoods-item-right!--商品名字--view classgoods-name{{goods.goods_name}}/viewview classgoods-info-boxview classgoods-price${{goods.goods_price}}/view/view/view/view/block/view/view
/template美化ui
style langscss.goods-item{display: flex;padding: 10px 5px;border-bottom: 1px solid #F0F0F0;.goods-item-left{margin-right: 5px;.goods-pic{width: 100px;height: 100px;display: block;}}.goods-item-right{display: flex;flex-direction: column;justify-content: space-between;.goods-name{font-size: 13px;}.goods-info-box{.goods-price{color: #C00000;font-size: 16px;}}}}/style查看界面首页分类页随便点一个进去看 四、把商品item封装为自定义组件
创建my-goods自定义组件 将从block下开始的UI全部抽取出来style也同理复制到新组件my-goods统一管理并调用my-goods自定义组件 my-goods组件不同点定义一个props用于接受参数
templateview classgoods-item!--左侧盒子--view classgoods-item-leftimage :srcgoods.goods_small_logo classgoods-pic/image/view!--右侧盒子--view classgoods-item-right!--商品名字--view classgoods-name{{goods.goods_name}}/viewview classgoods-info-boxview classgoods-price${{goods.goods_price}}/view/view/view/view
/templatescriptexport default {name: my-goods,props: {goods: {type: Object,default: {}}},data() {return {};}}
/scriptstyle langscss.goods-item{display: flex;padding: 10px 5px;border-bottom: 1px solid #F0F0F0;.goods-item-left{margin-right: 5px;.goods-pic{width: 100px;height: 100px;display: block;}}.goods-item-right{display: flex;flex-direction: column;justify-content: space-between;.goods-name{font-size: 13px;}.goods-info-box{.goods-price{color: #C00000;font-size: 16px;}}}}
/style封装完成也能正常展示页面 五、使用过滤器处理价格 六、上拉加载更多
1.打开项目根目录中的pages.json配置文件为subPackages分包中的goods_list 页面配置上拉触底的距离 2.在goods_list页面中和methods节点平级声明onReachBottom事件处理函数用来监听页面的上拉触底行为 onReachBottom() {// 让页面值自增this.queryObj.pagenum// 重新获取列表数据this.getGoodsList()}3.改造methods中的getGoodsList函数当请求成功之后进行新旧数据的拼接处理
上拉页面就可以加载后面页码的内容数据获取之前无法展示的数据了。 这里存在一些问题需要解决 当我们一直往下滑动请求数据时会频繁的向我们后台发送请求获取数据可能我们第二页还没加载完就在发送第五页数据请求了。 所以我们需要等待第二页数据完后续的请求都不能发起这样才比较合理
我们可以通过开启节流阀防止发起额外的请求
在请求数据前后打开关闭节流阀 在触发触底事件时要判断节流阀是否开启 还有个bug当我们页面加载完时再上拉获取数据还是会发送新的页面请求但实际我们后台的pagenum已经到最后一页只有3页数据但在发送第四页请求所以我们还要判断数据是否获取完毕 解决这个问题也很简单 这样就比较合理数据加载完不会发送新数据再去获取列表
七、下拉刷新
enablePullDownRefresh表示开启当前页面的下拉刷新功能 2.监听页面的onPullDownRefresh事件如果发生下拉事件刷新数据与methods平级创建 onPullDownRefresh() {// 重置关键数据this.queryObj.pagenum 1this.total 0this.isloading falsethis.goodsList []// 重新发起数据请求this.getGoodsList(() uni.stopPullDownRefresh())}3.修改getGoodsList函数接受cb回调函数并按需进行调用 上拉刷新重置我们之前发送的请求比如之前如果向下获取过第二页第三页数据就没了只有第一页
八、点击商品item项跳转到详情页面
前面做过很多了很简单
点击成功跳转
