wxml:

  <view class="page-section-spacing">
<view>
<text>商家列表</text>
</view>
<scroll-view scroll-y="true" class="page-scroll-style" bindscrolltolower="scroll">
<block wx:for="{{goods}}" wx:key="goods">
<view class="scroll-view-content">
<image src="{{item.title}}" class="scroll-view-image"></image>
<view class="scroll-view-text">
{{item.price}}
</view>
<view class="scroll-view-name">
{{item.type}}
</view>
</view>
</block>
</scroll-view>
</view>
</view>

wxss:

/**index.wxss**/
.weui-search-bar {
position: relative;
padding: 8px 10px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
box-sizing: border-box;
background-color: #EFEFF4;
border-top: 1rpx solid #D7D6DC;
border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {
position: absolute;
left: 10px;
top: 7px;
}
.weui-search-bar__form {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: auto;
flex: auto;
border-radius: 5px;
background: #FFFFFF;
border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
position: relative;
padding-left: 30px;
padding-right: 30px;
width: 100%;
box-sizing: border-box;
z-index: 1;
}
.weui-search-bar__input {
height: 28px;
line-height: 28px;
font-size: 14px;
}
.weui-search-bar__cancel-btn {
margin-left: 10px;
line-height: 28px;
color: #09BB07;
white-space: nowrap;
}
.swp{
height: 500rpx;
}
.page-section-spacing{
margin-top: 60rpx;
} .page-scroll-style{
height: 1000rpx;
background: aliceblue;
}
.scroll-view-content{
height: 230rpx;
margin: auto 10rpx;
background: white;
border: 1px solid gray;
}
.scroll-view-image{
width: 200rpx;
height: 200rpx;
margin-top: 15rpx;
margin-left: 20rpx;
float: left;
}
.scroll-view-text{
width: 400rpx;
float: left;
font-weight: 800;
margin-top: 15rpx;
margin-left: 20rpx;
}
.scroll-view-name{
float: left;
font-size: 30rpx;
color: gray;
margin-top: 20rpx;
margin-left: 20rpx;
}
.scroll-view_H{
white-space: nowrap;
}
.scroll-view-item{
height: 300rpx;
}
.scroll-view-item_H{
display: inline-block;
width: 100%;
height: 300rpx;
}

wxjs:

// 获取应用实例
const app = getApp() Page({
data: {
goods:[
{
'title':'22',
'price':'22-徐汇校区',
'type':'2',
"info":"22222222222222"
}, ],
page:1,
last_page : ''
},
//加载
scroll(e){
let that = this;
let page = that.data.page+1;
that.setData({
page:page
})
let last_page = that.data.last_page
if(page > last_page){
wx.showToast({
title: '到底了',
})
return ;
}
wx.showLoading({
title: '加载中',
})
wx.request({
// 请求的网址
url: 'http://www.yan.com/api/xcx/goodIndex',
data:{'page':page},
header: {
'content-type': 'application/json' // 默认值
},
method:"POST",
success (res) {
let goods = res.data.data.data;
that.setData({
goods:that.data.goods.concat(goods)
})
wx.hideLoading()
}
})
},
// 页面自动加载
onLoad() {
var that = this;
wx.request({
url: 'http://www.yan.com/api/xcx/goodIndex',
header: {
'content-type': 'application/json' // 默认值
},
method:'POST',
success (res) {
let goods = res.data.data.data;
that.setData({
goods:goods,
last_page:res.data.data.last_page
})
}
})
},
})

laravel 路由

//商品展示
Route::post('xcx/goodIndex','xcx\LoginController@goodIndex');

控制器代码

//商品列表展示
public function goodIndex(Request $request)
{
// 接受页码
$page=$request->post('page');
$data=GoodRelease::orderBy('id','desc')->paginate($page);
if(!$data){
return ['code' => 500, 'meg' => 'no', 'data' =>''];
}
return ['code' => 200, 'meg' => '列表展示成功', 'data' => $data]; }

效果图:

微信小程序逐屏分页刷新的更多相关文章

  1. 微信小程序 - 骨架屏

    骨架屏 - “与其等待网络加载,不如提前给点暗示” 注:不适用复杂交互效果 演示 示例解释以及使用全在index.wxml中,观看需了解组件使用. 示例下载:微信小程序-骨架屏演示

  2. 微信小程序的下拉刷新

    微信小程序的下拉刷新:在page的js文件中有监听用户下拉刷新的处理函数onPullDownRefresh:function(){} //js文件中自带的处理函数,在onUnload下面,注意不要重复 ...

  3. 微信小程序-自定义下拉刷新

    最近给别个公司做技术支持,要实现微信小程序上拉刷新与下拉加载更多 微信给出的接口不怎么友好,最终想实现效果类似QQ手机版 ,一共3种下拉刷新状态变化,文字+图片+背景颜色 最终实现后的效果(这里提示有 ...

  4. 直击根源:微信小程序中web-view再次刷新后页面需要退两次

    背景 在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面 问题描述 在A页面从B ...

  5. 微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题

    1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减少文件大小占比,也可以下载以前旧版本文件比较小的应付使用 下载 ...

  6. mpvue 微信小程序半屏弹框(half-screen-dialog)

    <template> <div> <a @click="isShow">half-screen-dialog</a> <!-- ...

  7. 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)

    业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...

  8. 微信小程序上拉下拉刷新

    小程序提供了,onPullDownRefresh和onReachBottom两个事件函数监听下拉和上拉事件函数.提示加载中,取消加载中 效果: js文件 // pages/enterprise/ent ...

  9. 关于微信小程序返回页面时刷新页面的实现

    在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新 ...

随机推荐

  1. Argo 安装和 workflow 实例配置文件解析

    一.Argo 安装配置 1.1 Argo 安装 $ kubectl create ns argo $ kubectl apply -n argo -f https://raw.githubuserco ...

  2. Android图表库hellocharts详解

    感谢大佬:https://www.cnblogs.com/huolongluo/p/5988644.html 因为项目需要搞一个折线图,按照日期显示相应的成绩,所以有了本文. 以前用过一次XCL-ch ...

  3. Servlet核心内容

    Servlet重要的四个生命周期方法 构造方法: 创建servlet对象的时候调用.默认情况下,第一次访问servlet的时候创建servlet对象只调用1次.证明servlet对象在tomcat是单 ...

  4. GoogleGoogleGoogle!!!! 百度云资源

    一些谷歌镜像地址,够用了 Google 镜像站搜集 田飞雨 » Google 镜像站搜集 https://github.com/sxyx2008/DevArticles/issues/99 http: ...

  5. 各种字体.效果和名字对应图. --- by 王朋

    原帖地址:http://www.oschina.net/question/565065_76244

  6. 【HDU6662】Acesrc and Travel(树型Dp)

    题目链接 大意 给出一颗树,每个点上有一个权值\(A[i]\),有两个绝顶聪明的人甲和乙. 甲乙两人一起在树上轮流走,不能走之前经过的点.(甲乙时刻在一起) 甲先手,并可以确定起点.甲想要走过的点权之 ...

  7. springBoot工程解决跨域问题

    更新:通过一个 @CrossOrigin  注解就可以完美解决跨域问题. 创建一个配置类 package com.miaoshaProject.configuration; import org.sp ...

  8. Pytorch技法:继承Subset类完成自定义数据拆分

    我们在<torch.utils.data.DataLoader与迭代器转换>中介绍了如何使用Pytorch内置的数据集进行论文实现,如torchvision.datasets.下面是加载内 ...

  9. Solution Set - Border Theory

      我发现写 Solution Set 就不用写每道题的题意了,岂不美哉?   首先是一些奇妙结论.   定理 1(弱周期定理) 对于字符串 \(S\),若 \(S[:p]\) 和 \(S[:q]\) ...

  10. design PLL

    PLL PLL主要是NCO中通过相位比较器,控制压控振荡器,控制频率.