小程序Scroll-view上拉滚动刷新数据


Posted in Javascript onJune 21, 2020

本文实例为大家分享了小程序Scroll-view上拉滚动刷新数据的具体代码,供大家参考,具体内容如下

因为项目需求,我需要做一个上拉刷新,但是我不是小程序的原生刷新生命周期函数事件

小程序scroll-view,有一个滚到底部触发事件bindscrolltolower加粗样式

小程序Scroll-view上拉滚动刷新数据

把自己需要滚动的内容放在这个scroll-view之间,然后。给scroll-view一个滚动高度
首先先看一下效果图吧

小程序Scroll-view上拉滚动刷新数据

order.wxml页面

<scroll-view class='scroll' scroll-y="{{true}}" bindscrolltolower="scrolltolower">
 <view class="tabs">
 <block wx:for="{{ tabs }}" wx:key='{{ index }}'>
 <view bind:tap="changeTab" data-index='{{ index }}' class="tab {{ tabindex === index ? 'active' : '' }}">{{ item }}</view>
 </block>
 </view>
 <view style="height: 80rpx"></view>
 <view>
 <block wx:for="{{ goods }}" wx:key="{{ index }}">
 <view class="content">
 <view class="conbg">
  <view class="con-top">
  <view class="shopname iconfont icon-right ellipsis">{{ item.shopName }}</view>
  <view class="good-status" wx:if="{{item.goodStatus==0}}">卖家未发货</view>
  <view class="good-status" wx:if="{{item.goodStatus==1}}">卖家已发货</view>
  </view>
  <view class="goodinfo">
  <!-- 商品图 -->
  <image class="goodimg" src="{{ item.goodImg }}" mode="scaleToFill"></image>
  <!-- 商品信息 -->
  <view class="good-info">
  <view class="good-title ellipsis2">{{ item.goodName }}</view>
  <view class="good-desc ellipsis2">{{ item.goodDesc }}</view>
  <view class="shop-server">
  <text wx:for="{{ item.shopServers }}" wx:key="{{ index }}">{{ item }}</text>
  </view>
  </view>
  <view class="good-price">
  <view class="price">¥ {{ item.goodPrice }}</view>
  <!-- 购买商品个数 -->
  <view class="num">x {{ item.goodNum }}</view>
  </view>
  </view>
  <!-- 商品总计 -->
  <view class="total">
  <!-- <text>共{{ goodNum }}件商品</text> -->
  <text>合计: ¥{{ item.goodTotalPrice }}</text>
  </view>
  <view class="operate">
  <view class="check-delivery">查看物流</view>
  <view>
  <view class="comfirm-delivery">确认收货</view>
  </view>

  </view>
 </view>
 </view>
 </block>
 <block wx:if="{{goods==''}}">
 <view class='goodsmsg'>
 <image class='tab1Img' src="../images/order.png"></image>
 <text>你暂时还没有商品~</text>
 <text class='buyMore'>去逛逛~</text>
 </view>
 </block>
 </view>
 <view class="no-more" wx:if='{{ hasMore}}'>加载中...</view>
 <view class="no-more" wx:else>已经到底了...</view>
</scroll-view>

order.wxss

.tabs {
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 width: 100%;
 height: 80rpx;
 top: 0;
 left: 0;
 background: #f2f2f2;
}
.tabs .tab {
 padding: 0 32rpx;
 font-size: 28rpx;
 height: 76rpx;
 line-height: 76rpx;
 color: #666;
 border-bottom: 4rpx solid transparent;
}
.tabs .tab.active {
 border-bottom-color: #e94a01;
 color: #e94a01;
}
.content {
 padding: 20rpx;
 box-sizing: border-box;
}
.content .conbg {
 background-color: #fff;
 box-sizing: border-box;
 border-radius: 20rpx;
 padding: 0 20rpx 20rpx;
}
.con-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 24rpx;
 height: 76rpx;
 line-height: 76rpx;
}
.shopname {
 font-size: 24rpx;
}
.shopname:after {
 color: #666;
 margin-left: 10rpx;
}
.good-status {
 flex-shrink: 0;
 margin-left: 20rpx;
 color: #e94a01;
}
.goodinfo {
 display: flex;
}
.goodinfo .goodimg {
 width: 188rpx;
 height: 188rpx;
 border-radius: 10rpx;
 flex-shrink: 0;
 margin-right: 20rpx;
}
.goodinfo .good-info {
 font-size: 28rpx;
}
.goodinfo .good-info .good-title {
 font-weight: bold;
}
.goodinfo .good-info .good-desc {
 color: #666;
}
.goodinfo .good-info .shop-server {
 display: flex;
 margin-top: 10rpx;
 flex-wrap: wrap;
}
.goodinfo .good-info .shop-server text {
 padding: 6rpx;
 margin-right: 10rpx;
 background-color: rgba(211, 94, 36, 0.2);
 color: #cc602f;
 font-size: 20rpx;
 margin-bottom: 10rpx;
 border-radius: 6rpx;
}
.goodinfo .good-price {
 flex-shrink: 0;
 font-size: 24rpx;
 display: flex;
 flex-direction: column;
}
.goodinfo .good-price .price {
 font-weight: bold;
 font-size: 28rpx;
}
.goodinfo .good-price .num {
 text-align: right;
 font-size: 28rpx;
 color: #666;
}
.total {
 display: flex;
 justify-content: flex-end;
 height: 80rpx;
 line-height: 80rpx;
 margin-top: 30rpx;
 font-size: 28rpx;
 font-weight: bold;
}
.total text {
 margin-left: 20rpx;
}
.operate {
 display: flex;
 justify-content: flex-end;
 font-size: 28rpx;
}
.operate > view {
 height: 60rpx;
 line-height: 60rpx;
 padding: 0 24rpx;
 border: 1px solid #666;
 margin: 0 10rpx;
 border-radius: 30rpx;
}
.operate > view.comfirm-delivery {
 color: #d64904;
 border-color: #d64904;
}
.no-more {
 height: 80rpx;
 line-height: 80rpx;
 text-align: center;
 font-size: 24rpx;
}
.goodsmsg{
 width: 100%;
 height: 300rpx;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 flex-direction: column;

}

order.js

// pages/home/order/order.js
var tool = require("../../../utils/util.js")
Page({

 /**
 * 页面的初始数据
 */
 data: {
 idx: 0, //默认选中第一项
 hasMore: true,
 indexNum: 0,
 tabs: ['全部', '待付款', '待发货', '已付款', '待评价'], // tab栏标题
 tabindex: 0, // 控制tab栏切换
 msgPage: 1, //分页
 washcar: [{
 id: 0,
 tips: "洗车"
 },
 {
 id: 1,
 tips: "违章查询"
 },
 {
 id: 2,
 tips: "商城订单"
 },
 {
 id: 3,
 tips: "会员"
 },
 ],
 selecttab: [{
 id: 0,
 tips: "处理中"
 },
 {
 id: 1,
 tips: "已成功"
 },
 {
 id: 2,
 tips: "已撤销"
 },
 {
 id: 3,
 tips: "全部"
 },

 ],
 

 goods: [
 {
 shopName: '商铺名称', // 商铺名称
 goodStatus: '卖家已发货', // 商品状态
 goodImg: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1986179278,1118313821&fm=27&gp=0.jpg', // 商品图片
 goodName: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称', // 商品名称
 goodDesc: '商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述', // 商品描述
 shopServers: ['商铺服务', '商铺服务', '商铺服务'], // 商铺服务
 goodPrice: '111.00', // 商品价格
 goodNum: '2', // 购买的商品数量
 goodTotalPrice: '111.00', // 商品总价格
 status: 0, // 订单的状态, 0表示还未收货, 1表示已收货还未评价, 2表示已经评价
 }, 
 ],
 },
 //点击切换
 tabChange: function(e) {
 var navigitionIndex = e.currentTarget.dataset.index;
 this.setData({
 indexNum: navigitionIndex
 })

 },
 //滑动切换
 changeswpier(e) {
 var cur = e.detail.current;
 this.setData({
 indexNum: cur
 })
 },
 //查询违章选项卡
 checkviolation(e) {
 let that = this;
 let index = e.currentTarget.dataset.index;
 that.setData({
 idx: index,
 })

 },
 changeTab(e) {
 var page = this.data.mgsPage
 const index = e.currentTarget.dataset.index
 this.setData({
 tabindex: index
 })
 tool.post('/order_list', {
 status: index - 1,
 page: page
 })
 .then((res) => {
 var goods = this.data.goods
 this.setData({
 goods: res.data.goods
 })
 })

 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 var id = options.id;
 this.setData({
 indexNum: id
 })
 var page = this.data.mgsPage
 tool.post('/order_list', {
 page: page
 })
 .then((res) => {
 var goods = this.data.goods
 this.setData({
 goods: res.data.goods
 })
 })
 },
 //下拉刷新数据
 scrolltolower() {
 if (this.lock) {
 wx.showToast({
 title: '已经到底了!',
 icon: 'none'
 })
 return
 }
 this.data.msgPage++
 wx.showLoading({
 title: '正在加载中...',
 })
 tool.post('/order_list', {
 page: this.data.msgPage
 })
 .then((res) => {
 var goodsList = this.data.goods;
 const newGoods = res.data.goods
 if (newGoods.length <= 0) {
 this.lock = true
 wx.hideLoading()
 wx.showToast({
 title: '已经到底了!',
 icon: 'none'
 })
 this.setData({
 hasMore: false
 })
 return
 }
 wx.hideLoading()
 goodsList = [...goodsList, ...newGoods] //取数组里的每一个值,然后再赋值到一个新数组里
 this.setData({
 goods: goodsList
 })
 })
 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
js实现3D照片墙效果
Oct 28 Javascript
jQuery 移除事件的方法
Jun 20 #jQuery
vue引入静态js文件的方法
Jun 20 #Javascript
详解Vue之计算属性
Jun 20 #Javascript
微信小程序实现多图上传
Jun 19 #Javascript
小程序表单认证布局及验证详解
Jun 19 #Javascript
小程序实现背景音乐播放和暂停
Jun 19 #Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 #Javascript
You might like
?繁体转换的class
2006/10/09 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
vue实现微信获取用户信息的方法
2019/03/21 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
webpack5 联邦模块介绍详解
2020/07/08 Javascript
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
python批量修改交换机密码的示例
2020/09/22 Python
python 如何设置守护进程
2020/10/29 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
.net软件工程师应聘上机试题
2015/03/10 面试题
酒店中秋节活动方案
2014/01/31 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
创先争优活动承诺书
2014/08/30 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书