uniapp微信小プログラムは一つのページに複数のカウントダウンを実現します。
本論文の例では、uniappが一つのページに複数のカウントダウンを実現するための具体的なコードを共有しています。参考にしてください。具体的な内容は以下の通りです。
設計図(需要)
構造
今注目度の高いWeChat小プログラムを紹介します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
設計図(需要)
構造
<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"> </button>
</view>
<view class="clock">
<text> :</text>
<!-- -->
<text>{{ item.end_time1 }}</text>
</view>
</view>
</view>
js。
export default {
data() {
return {
timeData: '', //
timer: '', //
message: [] //
}
},
onUnload(){ //
clearInterval(this.timer)
},
methods: {
getTimeList(){
let that = this
that.message.forEach((item) =>{
var nowdate = new Date().getTime() //
var time = item.productExpiredTime.replace(new RegExp("-", "gm"), "/") //ios "-" ; .productExpiredTime
var timesp = time.split('.')[0] // :"2019-12-31 11:00:00.0"
var enddate = new Date(timesp).getTime() //
var totaltime = enddate - nowdate //
that.totaltime(totaltime) // , "xx xx xx "
item.end_time1 = that.timeData // item ( )
})
this.message = that.message //
},
totaltime(a){ //
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)
//
h = d + h
h = test(h)
m = test(m)
s = test(s)
this.timeData =`${h} : ${m} : ${s} ` //
} else {
this.timeData = `00 : 00 : 00`
}
},
//
getUserGroupList( ) {
this.$ajax({
url: 'xxx/xxx/xxxxxx',
data: { },
success: res => {
var that = this
let data = res.data.groups
if (data.length === 0) {
this.$api.msg(' !')
setTimeout (function() {
uni.navigateBack({ //
delta: 1
})
},1500)
} else {
this.message = [...that.message, ...res.data.groups] //
// ,
//that.getTimeList()
var timer = setInterval(function () {
that.getTimeList()
}, 1000)
this.timer = timer
}
}
}
}
これで、一つのページに複数のカウントダウンが完了し、勉強を記録します。今注目度の高いWeChat小プログラムを紹介します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。