最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

uniapp微信小程序?qū)崿F(xiàn)一個(gè)頁(yè)面多個(gè)倒計(jì)時(shí)

 更新時(shí)間:2020年11月01日 14:21:42   作者:程序媛gy  
這篇文章主要為大家詳細(xì)介紹了uniapp微信小程序?qū)崿F(xiàn)一個(gè)頁(yè)面多個(gè)倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了uniapp實(shí)現(xiàn)一個(gè)頁(yè)面多個(gè)倒計(jì)時(shí)的具體代碼,供大家參考,具體內(nèi)容如下

設(shè)計(jì)圖(需求)

結(jié)構(gòu)

<view class="group-list" v-for="item in message" :key="item.productId">
 <view class="group-img" @click="navTo">
 <image :src="item.productPicture"></image>
 </view>
 <view class="group-info">
 <view class="product-name">{{ item.productName }}</view>
 <view class="product-price">
 <text class="discounts">¥{{ item.productCurrentPrice }}</text>
 <text class="original">¥{{ item.productMarketPrice }}</text>
 </view>
 <view class="group-partner">
 <scroll-view scroll-x>
 <view class="user-img">
 <view v-for="(single, index) in item.avatarList" :key="index">
 <image :src="single"></image>
 </view>
 <view v-for="i in item.stillMissingNumber" :key="i">
 <image src="../../static/ssll-img/more.png"></image>
 </view>
 </view>
 </scroll-view>
 <button open-type="share">邀請(qǐng)好友</button>
 </view>
 <view class="clock">
 <text>拼團(tuán)剩余:</text>
 <!-- 綁定倒計(jì)時(shí) -->
 <text>{{ item.end_time1 }}</text> 
 </view>
 </view>
</view>

js

export default {
 data() {
 return {
 timeData: '', //存放每條數(shù)據(jù)的處理好的倒計(jì)時(shí)
 timer: '', //用來清除定時(shí)器
 message: [] //接口請(qǐng)求返回的數(shù)據(jù)
 }
 },
 onUnload(){ //卸載頁(yè)面清除定時(shí)器
 clearInterval(this.timer) 
 },
 methods: {
 getTimeList(){ 
 let that = this
 that.message.forEach((item) =>{
  var nowdate = new Date().getTime() //獲取當(dāng)前時(shí)間毫秒數(shù)
  var time = item.productExpiredTime.replace(new RegExp("-", "gm"), "/") //ios不能識(shí)別日期格式中的 "-" ; .productExpiredTime是接口返回的名稱
  var timesp = time.split('.')[0] //此處是因?yàn)槲覀兘涌诜祷氐臅r(shí)間格式是這樣:"2019-12-31 11:00:00.0"
  var enddate = new Date(timesp).getTime() //處理好格式之后獲取結(jié)束時(shí)間的毫秒數(shù)
  var totaltime = enddate - nowdate //獲取時(shí)間差
  that.totaltime(totaltime) //這是下面封裝的方法,將毫秒數(shù)處理成"xx時(shí)xx分xx秒"
  item.end_time1 = that.timeData //處理好的單個(gè)時(shí)間安排到item上(重要)
 })
 this.message = that.message //全部處理好的數(shù)據(jù)重新賦值
 },
 
 totaltime(a){ //計(jì)算單個(gè)剩余時(shí)間
 let totaltime = a
 let that = this
  var h, m, s, d
  function test(num) {
  if (num < 10) {
   num = "0" + num 
  }
  return num
  }
  
 if (totaltime > 0) {
  d = Math.floor(totaltime / 1000 / 60 / 60 / 24) * 24
  h = Math.floor(totaltime / 1000 / 60 / 60 % 24)
  m = Math.floor(totaltime / 1000 / 60 % 60)
  s = Math.floor(totaltime / 1000 % 60)
  //獲取時(shí)分秒
  h = d + h
  h = test(h)
  m = test(m)
  s = test(s)
  
  this.timeData =`${h}時(shí) : ${m}分 : ${s}秒` // 每個(gè)時(shí)間的顯示格式
  
 } else {
  
  this.timeData = `00 : 00 : 00` 
  
 }
 },
 //以下請(qǐng)求此頁(yè)面需要的數(shù)據(jù)
 getUserGroupList(接口參數(shù)) {
 this.$ajax({
 url: 'xxx/xxx/xxxxxx',
 data: {接口參數(shù)},
 success: res => {
 var that = this
 let data = res.data.groups
 if (data.length === 0) {
 this.$api.msg('暫時(shí)您還沒有參團(tuán)信息!')
 setTimeout (function() {
 uni.navigateBack({ //返回上一頁(yè)
  delta: 1
 })
 },1500)
 } else {
 this.message = [...that.message, ...res.data.groups] //合并
 //數(shù)據(jù)返回成功之后再調(diào)計(jì)時(shí)器,防止異步
 //that.getTimeList()
 var timer = setInterval(function () {
  that.getTimeList()
 }, 1000)
 this.timer = timer
 }
 }
 }
}

至此,一個(gè)頁(yè)面多個(gè)倒計(jì)時(shí)就完成了, 記錄學(xué)習(xí)。

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論

宁河县| 宝清县| 岳阳县| 梁山县| 晋宁县| 花垣县| 阳高县| 巴青县| 兴义市| 沧源| 峨眉山市| 镇原县| 江都市| 兴城市| 湖南省| 兴仁县| 灵石县| 田东县| 洛阳市| 兴和县| 海林市| 呼和浩特市| 会宁县| 五河县| 临汾市| 秦皇岛市| 喀喇| 正定县| 呼图壁县| 麻栗坡县| 安顺市| 都安| 贵州省| 英德市| 青阳县| 浦城县| 保靖县| 龙门县| 琼结县| 汝南县| 桃江县|