小程序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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
摘自启点的main.js
Apr 20 Javascript
jquery之Document元素选择器篇
Aug 14 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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
Yii开启片段缓存的方法
2016/03/28 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
BootStrap selectpicker
2016/06/20 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python读写配置文件操作示例
2019/07/03 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
如何教少儿学习Python编程
2020/07/10 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
国际贸易毕业生求职信范文
2014/02/21 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
个人收入证明范本
2014/09/18 职场文书
购房个人委托书范本
2014/10/11 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
自荐信范文
2019/05/20 职场文书
Python实现拼音转换
2021/06/07 Python