vue移动端下拉刷新和上拉加载的实现代码


Posted in Javascript onSeptember 08, 2018

由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现。

vue移动端下拉刷新和上拉加载的实现代码

1、下拉刷新DropDownRefresh.vue

<template lang="html">
  <div class="refreshMoudle" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" :style="{transform: 'translate3d(0,' + top + 'px, 0)'}">
   <header class="pull-refresh">
    <slot name="pull-refresh">
     <div class="down-tip" v-if="dropDownState==1">
      <img v-if="dropDownStateText.downImg" class="down-tip-img" :src="require('../../assets/images/refreshAndReload/'+dropDownStateText.downImg)">
      <span class="down-tip-text">{{dropDownStateText.downTxt}}</span>
     </div>
     <div class="up-tip" v-if="dropDownState==2">
      <img v-if="dropDownStateText.upImg" class="up-tip-img" :src="require('../../assets/images/refreshAndReload/'+dropDownStateText.upImg)">
      <span class="up-tip-text">{{dropDownStateText.upTxt}}</span>
     </div>
     <div class="refresh-tip" v-if="dropDownState==3">
      <img v-if="dropDownStateText.refreshImg" class="refresh-tip-img" :src="require('../../assets/images/refreshAndReload/'+dropDownStateText.refreshImg)">
      <span class="refresh-tip-text">{{dropDownStateText.refreshTxt}}</span>
     </div>
    </slot>
   </header>
   <slot></slot>
  </div>
</template>
<script>
export default {
 props: {
  onRefresh: {
   type: Function,
   required: false
  }
 },
 data () {
  return {
   defaultOffset: 100, // 默认高度, 相应的修改.releshMoudle的margin-top和.down-tip, .up-tip, .refresh-tip的height
   top: 0,
   scrollIsToTop: 0,
   startY: 0,
   isDropDown: false, // 是否下拉
   isRefreshing: false, // 是否正在刷新
   dropDownState: 1, // 显示1:下拉刷新, 2:松开刷新, 3:刷新中……
   dropDownStateText: {
    downTxt: '下拉刷新',
    downImg: '',
    upTxt: '松开刷新',
    upImg: 'release.png',
    refreshTxt: '刷新中...',
    refreshImg: 'refresh.gif'
   }
  }
 },
 created () {
  if (document.querySelector('.down-tip')) {
   // 获取不同手机的物理像素(dpr),以便适配rem
   this.defaultOffset = document.querySelector('.down-tip').clientHeight || this.defaultOffset
  }
 },
 methods: {
  touchStart (e) {
   this.startY = e.targetTouches[0].pageY
  },
  touchMove (e) {
   this.scrollIsToTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop // safari 获取scrollTop用window.pageYOffset
   if (e.targetTouches[0].pageY > this.startY) { // 下拉
    this.isDropDown = true
    if (this.scrollIsToTop === 0 && !this.isRefreshing) {
     // 拉动的距离
     let diff = e.targetTouches[0].pageY - this.startY - this.scrollIsToTop
     this.top = Math.pow(diff, 0.8) + (this.dropDownState === 3 ? this.defaultOffset : 0)
     if (this.top >= this.defaultOffset) {
      this.dropDownState = 2
      e.preventDefault()
     } else {
      this.dropDownState = 1
      e.preventDefault()
     }
    }
   } else {
    this.isDropDown = false
    this.dropDownState = 1
   }
  },
  touchEnd (e) {
   if (this.isDropDown && !this.isRefreshing) {
    if (this.top >= this.defaultOffset) { // do refresh
     this.refresh()
     this.isRefreshing = true
     console.log(`do refresh`)
    } else { // cancel refresh
     this.isRefreshing = false
     this.isDropDown = false
     this.dropDownState = 1
     this.top = 0
    }
   }
  },
  refresh () {
   this.dropDownState = 3
   this.top = this.defaultOffset
   setTimeout(() => {
    this.onRefresh(this.refreshDone)
   }, 1200)
  },
  refreshDone () {
   this.isRefreshing = false
   this.isDropDown = false
   this.dropDownState = 1
   this.top = 0
  }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.refreshMoudle {
 width: 100%;
 margin-top: -100px;
 -webkit-overflow-scrolling: touch; /* ios5+ */
}
.pull-refresh {
 width: 100%;
 color: #999;
 transition-duration: 200ms;
}
.refreshMoudle .down-tip,
.up-tip,
.refresh-tip {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100px;
}
.refreshMoudle .down-tip-img,
.up-tip-img,
.refresh-tip-img {
 width: 35px;
 height: 35px;
 margin-right: 5px;
}
</style>
2、上拉加载PullUpReload.vue
<template lang="html">
 <div class="loadMoudle" @touchstart="touchStart($event)" @touchmove="touchMove($event)" :style="{transform: 'translate3d(0,' + top + 'px, 0)'}">
  <slot></slot>
  <footer class="load-more">
   <slot name="load-more">
    <div class="moreData-tip" v-if="pullUpState==1">
     <span class="moreData-tip-text">{{pullUpStateText.moreDataTxt}}</span>
    </div>
    <div class="loadingMoreData-tip" v-if="pullUpState==2">
     <span class="icon-loading"></span>
     <span class="loadingMoreData-tip-text">{{pullUpStateText.loadingMoreDataTxt}}</span>
    </div>
    <div class="noMoreData-tip" v-if="pullUpState==3">
     <span class="connectingLine"></span>
     <span class="noMoreData-tip-text">{{pullUpStateText.noMoreDataTxt}}</span>
     <span class="connectingLine"></span>
    </div>
   </slot>
  </footer>
 </div>
</template>

<script>
export default {
 props: {
  parentPullUpState: {
   default: 0
  },
  onInfiniteLoad: {
   type: Function,
   require: false
  }
 },
 data () {
  return {
   top: 0,
   startY: 0,
   pullUpState: 0, // 1:上拉加载更多, 2:加载中……, 3:我是有底线的
   isLoading: false, // 是否正在加载
   pullUpStateText: {
    moreDataTxt: '上拉加载更多',
    loadingMoreDataTxt: '加载中...',
    noMoreDataTxt: '我是有底线的'
   }
  }
 },
 methods: {
  touchStart (e) {
   this.startY = e.targetTouches[0].pageY
  },
  touchMove (e) {
   if (e.targetTouches[0].pageY < this.startY) { // 上拉
    this.judgeScrollBarToTheEnd()
   }
  },

  // 判断滚动条是否到底
  judgeScrollBarToTheEnd () {
   let innerHeight = document.querySelector('.loadMoudle').clientHeight
   // 变量scrollTop是滚动条滚动时,距离顶部的距离
   let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
   // 变量scrollHeight是滚动条的总高度
   let scrollHeight = document.documentElement.clientHeight || document.body.scrollHeight
   // 滚动条到底部的条件
   if (scrollTop + scrollHeight >= innerHeight) {
    if (this.pullUpState !== 3 && !this.isLoading) {
     this.pullUpState = 1
     this.infiniteLoad()
     // setTimeout(() => {
     //  this.infiniteLoad()
     // }, 200)
    }
   }
  },

  infiniteLoad () {
   this.pullUpState = 2
   this.isLoading = true
   setTimeout(() => {
    this.onInfiniteLoad(this.infiniteLoadDone)
   }, 800)
  },
  infiniteLoadDone () {
   this.pullUpState = 0
   this.isLoading = false
  }
 },
 watch: {
  parentPullUpState (curVal, oldVal) {
   this.pullUpState = curVal
  }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.load-more {
 width: 100%;
 color: #c0c0c0;
 background: #f7f7f7;
}
.moreData-tip,
.loadingMoreData-tip,
.noMoreData-tip {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 150px;
}
.loadMoudle .icon-loading {
 display: inline-flex;
 width: 35px;
 height: 35px;
 background: url(../../assets/images/refreshAndReload/loading.png) no-repeat;
 background-size: cover;
 margin-right: 5px;
 animation: rotating 2s linear infinite;
}
@keyframes rotating {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(1turn);
 }
}
.connectingLine {
 display: inline-flex;
 width: 150px;
 height: 2px;
 background: #ddd;
 margin-left: 20px;
 margin-right: 20px;
}
</style>
3、对两个组件的使用
<template>
 <section class="container">
  <v-refresh :on-refresh="onRefresh">
  <v-reload :on-infinite-load="onInfiniteLoad" :parent-pull-up-state="infiniteLoadData.pullUpState">
  <div class="bank_lists">
   <div class="bank_box">
    <div class="bank_list" v-for="item in bank_list" :key="item.id">
     <div class="bank_icon" :style="{ 'background': 'url(' + require('../assets/images/56_56/'+item.iconName) + ') no-repeat', 'background-size': '100%' }" ></div>
     <span class="bank_name">{{item.bankName}}</span>
    </div>
   </div>
  </div>
  <div class="hot_box">
   <div class="hot_header">
    <span class="hot_name">热门推荐</span>
    <div class="more_box">
     <span class="more_text">查看更多</span>
     <span class="more_icon"></span>
    </div>
   </div>
   <div class="hot_centenrt">
    <div class="hot_centent_left">
     <span class="hot_left_name">{{hot_centent_left.name}}</span>
     <span class="hot_left_desc">{{hot_centent_left.desc}}</span>
     <div class="hot_left_img" :style="{ 'background': 'url(' + require('../assets/images/bank/'+hot_centent_left.imgName) + ') no-repeat', 'background-size': '100%' }" ></div>
    </div>
    <div class="hot_centent_right">
     <div class="hot_right_top">
      <div class="hot_right_text_box">
       <span class="hot_right_name">{{hot_c_r_one.name}}</span>
       <span class="hot_right_desc">{{hot_c_r_one.desc}}</span>
      </div>
      <div class="hot_right_img" :style="{ 'background': 'url(' + require('../assets/images/bank/'+hot_c_r_one.imgName) + ') no-repeat', 'background-size': '100%' }" ></div>
     </div>
     <div class="hot_right_bottom">
      <div class="hot_right_text_box2">
       <span class="hot_right_name2">{{hot_c_r_two.name}}</span>
       <span class="hot_right_desc2">{{hot_c_r_two.desc}}</span>
      </div>
      <div class="hot_right_img" :style="{ 'background': 'url(' + require('../assets/images/bank/'+hot_c_r_two.imgName) + ') no-repeat', 'background-size': '100%' }" ></div>
     </div>
    </div>
   </div>
  </div>
  <div class="card_state">
   <div class="card_progress border-right">
    <div class="progress_icon"></div>
    <div class="card_text">
     <span class="card_state_name">{{card_progress.name}}</span>
     <span class="card_desc">{{card_progress.desc}}</span>
    </div>
   </div>
   <div class="card_activation">
    <div class="activation_icon"></div>
    <div class="card_text">
     <span class="card_state_name">{{card_activation.name}}</span>
     <span class="card_desc">{{card_activation.desc}}</span>
    </div>
   </div>
  </div>
  <div class="card_order">
   <div class="border_bottom card_content_bottom">
    <div class="hot_header">
     <span class="hot_name">热卡排行</span>
    </div>
   </div>
   <div slot="load-more">
   <li class="card_list" v-for="(item,index) in infiniteLoadData.pullUpList" :key="item.id">
    <div class="card_content" :class="infiniteLoadData.pullUpList.length - 1 != index? 'card_content_bottom':''">
     <div class="card_img" :style="{ 'background': 'url(' + require('../assets/images/bank/'+item.imgName) + ') no-repeat', 'background-size': '100%' }" ></div>
     <div class="card_list_text">
      <p class="card_name">{{item.cardName}}</p>
      <p class="card_title">{{item.cardTitle}}</p>
      <div class="card_words_lists">
       <div class="card_words bor_rad_20">
        <p class="card_word">{{item.cardWordOne}}</p>
       </div>
       <div v-if="item.cardWordTwo" class="card_words card_words_two bor_rad_20">
        <p class="card_word">{{item.cardWordTwo}}</p>
       </div>
      </div>
     </div>
    </div>
   </li>
   </div>
  </div>
  </v-reload>
  </v-refresh>
 </section>
</template>

<script>
import DropDownRefresh from './common/DropDownRefresh'
import PullUpReload from './common/PullUpReload'
export default {
 data () {
  return {
   bank_list: [
    {
     iconName: 'zhaoshang.png',
     bankName: '招商银行'
    },
    {
     iconName: 'minsheng.png',
     bankName: '民生银行'
    },
    {
     iconName: 'pingancar.png',
     bankName: '平安联名'
    },
    {
     iconName: 'xingye.png',
     bankName: '兴业银行'
    },
    {
     iconName: 'shanghai.png',
     bankName: '上海银行'
    },
    {
     iconName: 'jiaotong.png',
     bankName: '交通银行'
    },
    {
     iconName: 'guangda.png',
     bankName: '光大银行'
    },
    {
     iconName: 'more.png',
     bankName: '全部银行'
    }
   ],
   hot_centent_left: {
    bankName: '交通银行',
    name: '交行Y-POWER黑卡',
    desc: '额度100%取现',
    imgName: 'jiaohangY-POWER.png'
   },
   hot_c_r_one: {
    bankName: '招商银行',
    name: '招行YOUNG卡',
    desc: '生日月双倍积分',
    imgName: 'zhaohangYOUNG.png'
   },
   hot_c_r_two: {
    bankName: '光大银行',
    name: '光大淘票票公仔联名卡',
    desc: '电影达人必备',
    imgName: 'guangdalianming.png'
   },
   card_progress: {
    name: '办卡进度',
    desc: '让等待随处可见'
   },
   card_activation: {
    name: '办卡激活',
    desc: '让等待随处可见'
   },
   card_list: [
    {
     bankName: '平安联名',
     imgName: 'pinganqiche.png',
     cardName: '平安银行信用卡',
     cardTitle: '平安银行汽车之家联名单币卡',
     cardWordOne: '首年免年费',
     cardWordTwo: '加油88折'
    },
    {
     bankName: '上海银行',
     imgName: 'shanghaitaobao.png',
     cardName: '上海银行信用卡',
     cardTitle: '淘宝金卡',
     cardWordOne: '积分抵现',
     cardWordTwo: '首刷有礼'
    },
    {
     bankName: '华夏银行',
     imgName: 'huaxiaiqiyi.png',
     cardName: '华夏银行信用卡',
     cardTitle: '华夏爱奇艺悦看卡',
     cardWordOne: '送爱奇艺会员',
     cardWordTwo: '商城8折'
    },
    {
     bankName: '浦发银行',
     imgName: 'pufajianyue.png',
     cardName: '浦发银行信用卡',
     cardTitle: '浦发银行简约白金卡',
     cardWordOne: '团购立减',
     cardWordTwo: '酒店优惠 免年费'
    },
    {
     bankName: '中信银行',
     imgName: 'zhongxinbaijin.png',
     cardName: '中信银行信用卡',
     cardTitle: '中信银行i白金信用卡',
     cardWordOne: '首刷有礼',
     cardWordTwo: '双倍积分'
    }
   ],

   // 上拉加载的设置
   infiniteLoadData: {
    initialShowNum: 3, // 初始显示多少条
    everyLoadingNum: 3, // 每次加载的个数
    pullUpState: 0, // 子组件的pullUpState状态
    pullUpList: [], // 上拉加载更多数据的数组
    showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
   }
  }
 },
 mounted () {
  this.getStartPullUpState()
  this.getPullUpDefData()
 },
 methods: {
  // 获取上拉加载的初始数据
  getPullUpDefData () {
   this.infiniteLoadData.pullUpList = []
   for (let i = 0; i < this.infiniteLoadData.initialShowNum; i++) {
    this.infiniteLoadData.pullUpList.push(this.card_list[i])
   }
  },

  getStartPullUpState () {
   if (this.card_list.length === this.infiniteLoadData.initialShowNum) {
    // 修改子组件的pullUpState状态
    this.infiniteLoadData.pullUpState = 3
   } else {
    this.infiniteLoadData.pullUpState = 0
   }
  },

  // 上拉一次加载更多的数据
  getPullUpMoreData () {
   this.showPullUpListLength = this.infiniteLoadData.pullUpList.length
   if (this.infiniteLoadData.pullUpList.length + this.infiniteLoadData.everyLoadingNum > this.card_list.length) {
    for (let i = 0; i < this.card_list.length - this.showPullUpListLength; i++) {
     this.infiniteLoadData.pullUpList.push(this.card_list[i + this.showPullUpListLength])
    }
   } else {
    for (let i = 0; i < this.infiniteLoadData.everyLoadingNum; i++) {
     this.infiniteLoadData.pullUpList.push(this.card_list[i + this.showPullUpListLength])
    }
   }
   if (this.card_list.length === this.infiniteLoadData.pullUpList.length) {
    this.infiniteLoadData.pullUpState = 3
   } else {
    this.infiniteLoadData.pullUpState = 0
   }
  },

  // 下拉刷新
  onRefresh (done) {
   // 如果下拉刷新和上拉加载同时使用,下拉时初始化上拉的数据
   this.getStartPullUpState()
   this.getPullUpDefData()
   done() // call done
  },

  // 上拉加载
  onInfiniteLoad (done) {
   if (this.infiniteLoadData.pullUpState === 0) {
    this.getPullUpMoreData()
   }
   done()
  }
 },
 components: {
  'v-refresh': DropDownRefresh,
  'v-reload': PullUpReload
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../assets/css/not2rem.css";
.container {
 display: flex;
 flex-direction: column;
 width: 750px;
 height: 1334px;
 background-color: #f7f7f7;
}

.bank_lists {
 width: 100%;
 height: 320px;
 margin-top: 0px;
 background-color: #fff;
}

.bank_box {
 display: flex;
 flex-wrap: wrap;
 padding: 2px 7px 42px 7px;
}

.bank_list {
 width: 100px;
 height: 98px;
 margin: 40px 42px 0 42px;
}

.bank_icon {
 width: 56px;
 height: 56px;
 margin: 0 22px 18px;
}

.bank_name {
 display: inline-flex;
 width: 110px;
 height: 24px;
 line-height: 24px;
 font-size: 24px;
 color: #333;
}

.hot_box {
 width: 100%;
 height: 420px;
 margin-top: 10px;
 background: #fff;
}

.hot_header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 674px;
 height: 80px;
 margin: 0 30px 0 46px;
}

.hot_name {
 display: inline-flex;
 height: 28px;
 line-height: 28px;
 font-size: 28px;
 color: #333;
}

.more_text {
 display: inline-flex;
 height: 24px;
 line-height: 24px;
 font-size: 24px;
 color: #999;
}

.more_icon {
 display: inline-flex;
 margin-left: 20px;
 width: 11px;
 height: 20px;
 background: url("../assets/images/icon/more.png") no-repeat;
 background-size: 100%;
}

.hot_centenrt {
 display: flex;
 flex-direction: row;
 width: 710px;
 height: 320px;
 margin: 0 20px 20px 20px;
}

.hot_centent_left {
 flex-direction: column;
 width: 350px;
 height: 320px;
 background: #f7f7f7;
}

.hot_left_name {
 display: inline-flex;
 width: 282px;
 height: 24px;
 margin: 50px 34px 0 34px;
 font-size: 24px;
 line-height: 24px;
 color: #333;
}

.hot_left_desc {
 display: inline-flex;
 width: 282px;
 height: 20px;
 margin: 12px 34px 0 34px;
 font-size: 20px;
 line-height: 20px;
 color: #999;
}

.hot_left_img {
 width: 220px;
 height: 142px;
 margin-left: 34px;
 margin-top: 34px;
}

.hot_centent_right {
 flex-direction: column;
 width: 350px;
 height: 320px;
 margin-left: 10px;
}

.hot_right_top {
 display: flex;
 flex-direction: row;
 width: 100%;
 height: 156px;
 background: #f7f7f7;
}

.hot_right_text_box {
 display: flex;
 flex-direction: column;
 width: 180px;
 height: 58px;
 margin: 49px 20px 0 20px;
}

.hot_right_name {
 display: inline-flex;
 width: 100%;
 height: 24px;
 line-height: 24px;
 font-size: 24px;
 color: #333;
}

.hot_right_desc {
 display: inline-flex;
 margin-top: 10px;
 width: 100%;
 height: 24px;
 line-height: 24px;
 font-size: 24px;
 color: #999;
}

.hot_right_img {
 width: 110px;
 height: 70px;
 margin-top: 43px;
}

.hot_right_bottom {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
 height: 156px;
 margin-top: 8px;
 background: #f7f7f7;
}

.hot_right_text_box2 {
 display: flex;
 flex-direction: column;
 width: 180px;
 margin: 31px 20px 0 20px;
}

.hot_right_name2 {
 display: inline-flex;
 width: 100%;
 height: 58px;
 line-height: 30px;
 font-size: 24px;
 color: #333;
}

.hot_right_desc2 {
 display: inline-flex;
 margin-top: 12px;
 width: 100%;
 height: 24px;
 line-height: 24px;
 font-size: 24px;
 color: #999;
}

.card_state {
 display: flex;
 flex-direction: row;
 width: 100%;
 height: 128px;
 margin-top: 10px;
 background-color: #fff;
}
.card_progress {
 display: inline-flex;
 width: 327px;
 height: 88px;
 margin: 20px 0 20px 48px;
}
.progress_icon {
 width: 48px;
 height: 48px;
 margin: 20px 0;
 background: url("../assets/images/icon/search.png") no-repeat;
 background-size: 100%;
}
.activation_icon {
 width: 48px;
 height: 48px;
 margin: 20px 0;
 background: url("../assets/images/icon/activation.png") no-repeat;
 background-size: 100%;
}
.card_text {
 width: 228px;
 height: 66px;
 margin: 11px 20px 11px 30px;
}
.card_state_name {
 display: inline-flex;
 width: 100%;
 height: 28px;
 line-height: 28px;
 font-size: 28px;
 color: #333;
}
.card_desc {
 display: inline-flex;
 width: 100%;
 height: 22px;
 line-height: 22px;
 font-size: 22px;
 margin-top: 16px;
 color: #999;
}
.card_activation {
 display: inline-flex;
 width: 326px;
 height: 88px;
 margin: 20px 0 20px 48px;
}

.card_order {
 width: 100%;
 height: auto;
 margin-top: 10px;
 background-color: #fff;
}
.border_bottom {
 width: 100%;
 height: 80px;
}
.card_list {
 width: 100%;
 height: 228px;
 list-style-type: none;
}
.card_content {
 display: flex;
 flex-direction: row;
 width: 700px;
 height: 228px;
 margin-left: 50px;
}
.card_img {
 width: 186px;
 height: 120px;
 margin: 54px 0 54px 20px;
}
.card_list_text {
 flex-direction: column;
 width: 386px;
 height: 124px;
 margin: 52px 34px 52px 74px;
}
.card_name {
 width: 100%;
 height: 28px;
 line-height: 28px;
 font-size: 28px;
 color: #333;
}
.card_title {
 width: 100%;
 height: 24px;
 margin-top: 20px;
 line-height: 24px;
 font-size: 24px;
 color: #666;
}
.card_words_lists {
 display: flex;
 flex-direction: row;
}
.card_words {
 height: 36px;
 margin-top: 16px;
 background-color: #e8ca88;
}
.card_word {
 height: 20px;
 padding: 8px 18px;
 line-height: 20px;
 font-size: 20px;
 color: #4b4b4b;
}
.card_words_two {
 margin-left: 20px;
}
</style>

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

Javascript 相关文章推荐
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
微信小程序登录session的使用
Mar 17 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
react 父子组件之间通讯props
Sep 08 #Javascript
js代码规范之Eslint安装与配置详解
Sep 08 #Javascript
vue弹窗插件实战代码
Sep 08 #Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 #Javascript
详解Webpack-dev-server的proxy用法
Sep 08 #Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 #Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 #Javascript
You might like
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python如何实现视频转代码视频
2019/06/17 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
大学生自我鉴定
2013/12/08 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
创先争优活动个人总结
2015/03/04 职场文书
我的1919观后感
2015/06/03 职场文书
歼十出击观后感
2015/06/11 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL