2. 程式人生 > >mui做的上拉重新整理和下拉載入和日期選擇器

mui做的上拉重新整理和下拉載入和日期選擇器

阿新 • • 發佈：2019-01-01
var pageCount = 1;//頁碼 var date_inputs = document.getElementsByClassName('select_date'); var today = new Date(); var thisyear = today.getFullYear(); var thismonth = today.getMonth(); today.setFullYear(thisyear,thismonth,1); var startDate,endDate; startDate = date_inputs[0
].value =formatter(today) ;//當月的1號 endDate = date_inputs[1].value =formatter(new Date()) ;//當前時間的日期 var resourse = {data:[],pageCount:0}; window.onload = function () { getData(startDate,endDate,'',pageCount); (function ($) { $.init( //初始化上拉下拉控制元件 { pullRefresh: { container: '#pullrefresh'
, down: { callback: pulldownRefresh }, up: { contentrefresh: '正在載入...', callback: pullupRefresh } } } ); var
inputs = $('.select_date'); inputs.each(function (i, input) { input.addEventListener('tap', function () { var _self = this; if (_self.picker) { _self.picker.show(function (rs) { input.value = rs.text; _self.picker.dispose(); _self.picker = null; }); } else { var optionsJson = this.getAttribute('data-options') || '{}'; var options = JSON.parse(optionsJson); _self.picker = new $.DtPicker(options); _self.picker.show(function (rs) { input.value = rs.text; //這個時候已經能拿到日期 compareDate(date_inputs[0].value,date_inputs[1].value); startDate = date_inputs[0].value; endDate = date_inputs[1].value; _self.picker.dispose(); _self.picker = null; }); } }, false); }); function pulldownRefresh() { setTimeout(function() { pageCount = 1; var text = document.getElementById('mysearch').value; getData(startDate,endDate,text,pageCount); // mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed deteleTip(); }, 1500); } /** * 上拉載入具體業務實現 */ function pullupRefresh() { deteleTip(); setTimeout(function() { mui('#pullrefresh').pullRefresh().endPullupToRefresh(); pageCount++; // mui('#pullrefresh').pullRefresh().endPullupToRefresh((++pageCount>resourse.pageCount)); //引數為true代表沒有更多資料了。呼叫了一次後面再呼叫就不執行下拉載入了，不知道是不是我使用的方法不對，所以我手動寫了一個提示語notMassge‘沒有更多資料了。。。’ if(pageCount <= resourse.pageCount){ resourse.data = []; var text = document.getElementById('mysearch').value; getData(startDate,endDate,text,pageCount,'pullupRefresh'); }else{ var notMassge = document.createElement('div'); notMassge.className = 'notMassge'; notMassge.id = 'notMassge'; notMassge.innerHTML = '沒有更多資料了。。。'; var buylist = document.body.querySelector('.buylist'); buylist.after(notMassge); } }, 1500); } })(mui); }; var notbuy_list = document.getElementById("notbuy_list"); //網路請求資料 var getData = function (start_Date, end_Date, str, PageCount, Refresh) { $.ajax({ type: "POST", //傳值方式 url: "******", //後臺處理地址 data: { PageCount:PageCount //頁碼，必填，首次為1，下拉載入，下拉一次+1 }, success: function (res) { if(Refresh){ //如果是下拉重新整理 for (var i=0;i<res.Items.length;i++){ res.Items[i].PRESCRIPTDATE = ChangeDateFormat(res.Items[i].PRESCRIPTDATE); } var html = template("notbuy_list_data", {data: res.Items}); document.getElementById('notbuy_list_medic').insertAdjacentHTML('beforeEnd', html); }else { var conent = document.getElementById('pullrefresh'); if(res.Items.length >0){ conent.style.display = 'block'; resourse.pageCount = res.TotalPages; for (var i=0;i<res.Items.length;i++){ res.Items[i].PRESCRIPTDATE = ChangeDateFormat(res.Items[i].PRESCRIPTDATE); } resourse.data = res.Items; var notbuy_list_data = template("notbuy_list_data", resourse); document.getElementById('notbuy_list_medic').innerHTML = notbuy_list_data; }else{ conent.style.display = 'none'; } } } //引數 }); } function deteleTip() { //刪除‘沒有更多資料’提示語； var parent = document.getElementById('prescription_content'); var child = document.getElementById("notMassge"); if(child){ parent.removeChild(child); } } function pushPage(ID) { //寫跳轉頁面的方法 console.info(ID); // history.go(); } function seachText() { deteleTip(); resourse.data = []; pageCount = 1; var text = document.getElementById('mysearch').value; if(clearSpace(text).length >0){ if (compareDate(startDate,endDate)) { getData(startDate,endDate,text,pageCount); } }else{ alert('請輸入關鍵字'); } } function getUrlParam (id, url) { //獲得位址列中的引數 window.location.search var reg = "/(\\?|\\&|\\&&)" + id + "=([^\\&]+)/im"; reg = eval(reg); var result = url.match(reg); if (result && result[2]) { return result[2]; } else { return null; } } //去除字串空格 function clearSpace (str){ var result; result = str.replace(/(^\s+)|(\s+$)/g,""); result = result.replace(/\s/g,""); return result; }; //日期比較 function compareDate(start, end) { console.info(start+" "+end); start = new Date(start); end = new Date(end); if (end - start < 0) { alert("結束日期要大於開始日期"); return false; } return true; } function formatter(date) { var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d); }; function ChangeDateFormat(val) { if (val != null) { var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10)); //月份為0-11，所以+1，月份小於10時補個0 var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); return date.getFullYear() + "-" + month + "-" + currentDate; } return ""; }

相關推薦

用vue-scroller做上拉重新整理，下拉載入的模板（簡單明瞭，通用）

1.首先下外掛,並在你的vue專案中引人 npm i vue-scroller -D import VueScroller from 'vue-scroller 2.Vue.use(VueScroller )（這一步別忘啦） 3.在你需要做上拉重新整理，下拉載入的地方加上<scroll

OC 建立TableView基類並結合MJRefresh實現上拉重新整理，下拉載入

1.建立繼承自UITableView的基類BaseTableView: #import <UIKit/UIKit.h> @class BaseTableView; @protocol BaseTableViewDelegate <NSObject> @option

RecyclerView上拉重新整理，下拉載入

Activity介面方法 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_mai

輪播圖、pulltofresh上拉重新整理，下拉載入

@輪播圖、pulltofresh上拉重新整理，下拉載入TOC import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.support.v4.view.Vi

分頁， 上拉重新整理、下拉載入。

一、自定義listview package com.fragment.home; import android.content.Context; import android.util.AttributeSet; import android.view.MotionEvent; impor

mint-ui 上拉重新整理，下拉載入

export default { data() { return { list: [], allLoaded: true, bottomStatus: "", wrapperHeight: 0, topStatus: "",

React Native 一個小專案其中一些主要功能實現 （頂部導航欄（可滑動）,網路解析，上拉重新整理，下拉載入）

//網路解析 import React, { Component } from "react"; import { View, Text, TouchableOpacity } from "react-native"; import RefreshListView, { Re

prlibrary上拉重新整理、下拉載入

import android.os.Handler; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.ListVi

React-native 三方框架實現上拉重新整理、下拉載入網路請求以及跳轉先詳情頁面

首先 第一步 需要匯入三方的類庫 和跳轉詳情頁面 yarn add react-native-refresh-list-view //導包 import RefreshListView, { RefreshState } from “react-nati

多條目載入 +上拉重新整理，下拉載入

//*Afragment->XListView 重新整理 載入 public class AFragment extends Fragment implements XListView.IXListViewListener { private String

Xrecycleview上拉重新整理，下拉載入

implementation 'com.jcodecraeer:xrecyclerview:1.3.2' Android studio3.0之後需要結局版本衝突 configurations.all { resolutionStrategy.eachDependency

mint ui 上拉重新整理，下拉載入問題

1.最外層包一層div，一定要有高度。2.mt-loadmore ,該外掛會預設自動載入一次，在頁面首次載入的時候。3.在載入成功後，並且是最後一頁時，要把allLoaded 設定為false；如果不是最後一頁，要設為true。大致程式碼如下：<div class="m

RecyclerView的上拉重新整理與下拉載入

1.佈局（用SwipeRefreshLayout實現下拉重新整理） <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/swipeRefreshLayout"

【Android-PullToRefresh】 上拉重新整理、下拉載入 使用詳解

轉載自：http://blog.csdn.net/lmj623565791/article/details/38238749，本文出自：【張鴻洋的部落格】 1、ListView下拉重新整理快速入門 pull-to-refresh對ListView進行了

(再次更新)打造RecyclerView萬能介面卡，上拉重新整理，下拉載入

入行幾個月了，一直想自己封裝一些類，剛好遇到了這個問題，現在跟大家分享。 注意點 1 泛型擦除 2 需要防止型別轉換異常 github地址：https://github.com/zw21544182/MyBaseDemo （裡面還有部分FileUtil

Angular JS 上拉重新整理，下拉載入

前言：最近在做一個專案用的Angular1.x 寫了一些頁面，現在遇到一個問題，需要實現列表頁面的下拉重新整理及上拉載入。於是乎進行了各種百度，剛開始搜的是“js 上拉重新整理下拉載入”，可是發現搜出來的都是jq ajax 請求資料，與現在的angular載入資料的方式有所區

混合開發中遇到的上拉重新整理，下拉載入的問題

上拉載入遇到的問題：        iscroll: 可以實現上下拉重新整理，載入，效果比較差，可是在頁面上只能上下滑動，不能左右滑動，如果你的頁面嵌入到客戶端的tab底下，就會阻止客戶端的左右滑動                    如果想要實現左右切換，就得把isc

mpvue上拉重新整理，下拉載入

第一種 重點：不要用scroll-view 效果 main.json { "navigationBarTitleText": "", "enablePullDownRefresh": true,//開啟下拉重新整理 "backgroundTextS

基於React Native官方元件FlatList，增加可定製化“下拉重新整理”、“下拉載入更多”元件API的新列表元件react-native-refresh-loadmore-flatlist

react-native-refresh-loadmore-flatlist 基於React Native官方元件FlatList，增加可定製化“下拉重新整理”、“下拉載入更多”元件API的新列表元件，具體實現功能如下： 自定義下拉重新整理元件API 自定義上拉Lo

安卓開發 phoenix下拉重新整理+taurus下拉重新整理

phoenix 重新整理 依賴： //phoenix下拉載入 compile 'com.yalantis:phoenix:1.2.3' xml使用依賴控制元件包裹Listview： <?xml version="1.0" encoding="utf-8