小程序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操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
jQuery实现元素的插入
Feb 27 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
vue设置一开始进入的页面教程
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
用Flash图形化数据(二)
2006/10/09 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
Java中final关键字详解
2015/08/10 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
python把转列表为集合的方法
2019/06/28 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
详解python播放音频的三种方法
2019/09/23 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
文明倡议书范文
2014/04/15 职场文书
个人担保书格式范文
2014/05/12 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
教师工作证明范本
2015/06/12 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA