滚动显示商品。
view 文件
<wxs module="util">
var timer = function(intDiff) {
var day = 0
, hour = 0
, minute = 0
, second = 0;
//时间默认值
if (intDiff > 0) {
day = Math.floor(intDiff / (60 * 60 * 24));
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}
if (hour <= 9) {
hour = '0' + hour
}
if (minute <= 9) {
minute = '0' + minute;
}
if (second <= 9) {
second = '0' + second;
}
var countDown = hour + ':' + minute + ':' + second
return countDown;
}
module.exports.timer = timer;
</wxs>
<block wx:if="{{percent<=100}}">
<progress stroke-width='2' percent="{{percent}}" />
</block>
<block wx:else>
<!-- 其他正在拼的团 -->
<view class="groupPlay">
<view id="pintuan" class="items">
<view class='title'>
<text>{{itemss.length}}人正在拼单，可直接参与</text>
<text bindtap='showMore'>查看更多</text>
</view>
<swiper class='swiper-box' autoplay='{{true}}' interval='4000' vertical='{{true}}' circular='{{true}}'>
<block wx:for="{{otherGroupBuy}}" wx:key="key">
<swiper-item catchtouchmove="catchtouchmove">
<block wx:for-index="idx" wx:for='{{item}}' wx:for-item="items" wx:key="keys">
<view class="item" >
<image src="{{items.imageUrls}}" ></image>
<view class="name">{{items.name}}</view>
<view class="info">
<view class="info-top">还差<span class="num">{{items.remaining}}</span>人成团</view>
<view class="info-bottom">剩余:{{util.timer(items.time)}}<text wx:if="{{items.time!=0}}">.{{msec}}</text><text wx:else>.0</text></view>
</view>
<view class="goBuy" bindtap='goBuy'>去参团</view>
</view>
</block>
</swiper-item>
</block>
</swiper>
</view>
</view>
<view class="cut-line"></view>
</block>
<!-- 其他正在拼的团 查看更多 -->
<view class='modal' wx:if="{{showOtherGroupBuyAll}}" catchtouchmove="catchtouchmove">
<view class='ogba'>
<view class='close' catchtap='close'><image src='../../image/closeOtherGroupBuyAll.png' catchtap='close'></image></view>
<view class='title'>正在拼单</view>
<scroll-view scroll-y class='content'>
<view class='item' wx:for="{{items}}">
<image src=''></image>
<view class='middle'>
<view class='top'>{{item.name}}<text>还差{{item.remaining}}人</text></view>
<view class='bottom'>剩余{{util.timer(item.time)}}<text wx:if="{{item.time!=0}}">.{{msec}}</text><text wx:else>.0</text></view>
</view>
<view class='right'>去拼单</view>
</view>
</scroll-view>
<view class='footer' wx:if="{{items.length>=10}}">仅显示十个正在拼单的人</view>
</view>
</view>
JS文件
Page({
/**
* 页面的初始数据
*/
data: {
msec:9,
otherGroupBuy:'',
showOtherGroupBuyAll:false,
percent: 0,
items:'',
itemss:[
{
imageUrls:'',
name:'除却巫山不是云',
remaining:'1',
time:'5'
},
{
imageUrls: '',
name: '曾经沧海难为水',
remaining: '1',
time: '10'
},
{
imageUrls: '',
name: '羌笛何须怨杨柳',
remaining: '1',
time: '1564'
},
{
imageUrls: '',
name: '春风不度玉门关',
remaining: '1',
time: '356'
},
{
imageUrls: '',
name: '醉卧沙场君莫笑',
remaining: '1',
time: '50'
},
{
imageUrls: '',
name: '葡萄美酒夜光杯',
remaining: '1',
time: '3600'
},
{
imageUrls: '',
name: '浔阳江头夜送客',
remaining: '1',
time: '1234'
},
{
imageUrls: '',
name: '大珠小珠落玉盘',
remaining: '1',
time: '1564'
},
{
imageUrls: '',
name: '远上寒山石径斜',
remaining: '1',
time: '356'
},
{
imageUrls: '',
name: '日照香炉生紫烟',
remaining: '1',
time: '50'
},
{
imageUrls: '',
name: '八月秋高风怒号',
remaining: '1',
time: '50'
}
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.showProgress();
that.getMsec();
that.timerOtherGroupBuyAll(that.data.items);
},
getMsec:function(){
var that = this;
var _msec = that.data.msec;
setInterval(function(){
if(_msec>0){
_msec--
}else{
_msec =9;
}
that.setData({
msec:_msec
})
},100)
},
showProgress() {
var that = this;
var progress = 0;
setInterval(function () {
that.setData({
percent: that.data.percent + 1
})
if (progress == 100) {
return
} else {
progress++
}
}, 20)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
touchmove:function(){
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
timerOtherGroupBuyAll: function () {
var that = this;
var items = that.data.itemss;
var num = Math.floor(items.length / 2);
console.log(num)
if(num>5){
num=5
}
items = items.slice(0,10);
setInterval(function () {
for (var i = 0; i < items.length; i++) {
if(items[i].time>0){
items[i].time--;
}
}
var _other = new Array();
for (var i = 0; i < num; i++) {
var arr = new Array();
arr.push(items[i * 2]);
arr.push(items[i * 2 + 1]);
_other.push(arr)
}
that.setData({
items: items,
otherGroupBuy: _other
})
}, 1000)
},
showMore:function(){
this.setData({
showOtherGroupBuyAll:true
})
},
close:function(){
console.log(111111);
this.setData({
showOtherGroupBuyAll:false
})
}
})
CSS文件
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
image{
vertical-align:top;
}
.cut-line{
width: 100%;
height: 20rpx;
background-color: #F2F2F2;
}
/*拼团玩法*/
.groupPlay{
width: 100%;
}
.items{
width: 100%;
}
.items .title{
width: 94%;
margin-left: 3%;
font-size:28rpx;
color: #333333;
border-bottom: 1rpx solid #f4f4f4;
height: 80rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.items .title text{
height: 100%;
display: flex;
align-items: center;
}
.items .title text:last-child{
color: #8a8a8a;
}
.items .title text:last-child::after{
content: '';
display: inline-block;
width: 14rpx;
height: 14rpx;
transform:rotate(45deg);
border-right: 1rpx solid #8a8a8a;
border-top: 1rpx solid #8a8a8a;
position: relative;
margin-left: 5rpx;
}
.items .num{
color: #ff5474;
}
.items .item{
width: 94%;
margin-left: 3%;
height: 160rpx;
border-bottom: 1rpx solid #f4f4f4;
display: flex;
justify-content: flex-start;
align-items: center;
}
.items .item:last-child{
border: none;
}
.items .item image{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: #ff5474;
}
.items .item .name{
flex: 1;
height: 100%;
line-height: 164rpx;
font-size: 28rpx;
font-weight: bold;
color: #333333;
margin-left:30rpx;
}
.items .item .info{
width: 200rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-right: 20rpx;
}
.items .item .info .info-top{
height: 40rpx;
font-size: 28rpx;
color: #333333;
margin-bottom:4rpx;
}
.items .item .info .info-bottom{
height: 40rpx;
font-size: 26rpx;
color: #888888;
}
.items .item .goBuy{
width:160rpx;
height: 70rpx;
font-size: 28rpx;
background-color: #ff5474;
color: #FFFFFF;
border-radius: 8rpx;
text-align: center;
line-height: 70rpx;
}
.swiper-box{
width: 100%;
height: 320rpx;
}
/* 其他人正在拼的团，查看更多 */
.modal{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0,0.3);
position: fixed;
top: 0;
left: 0;
z-index: 9900;
display: flex;
justify-content: center;
align-items: center;
}
.modal .ogba{
width: 650rpx;
max-height: 760rpx;
position: relative;
background-color: #fff;
border-radius: 20rpx;
}
.modal .ogba .title{
width: 100%;
height: 90rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #333;
border-bottom: 1rpx solid #f4f4f4;
}
.modal .ogba .footer{
width: 100%;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #8a8a8a;
border-top: 1rpx solid #f4f4f4;
}
.modal .ogba .content{
width: 100%;
height: 600rpx;
padding: 0;
margin: 0;
}
.modal .ogba .content .item{
width: 94%;
margin-left: 3%;
height: 120rpx;
border-bottom: 1rpx solid #f4f4f4;
display: flex;
justify-content: flex-start;
align-items: center;
}
.modal .ogba .content .item:last-child{
border-bottom: none;
}
.modal .ogba .content .item image{
width: 90rpx;
height: 90rpx;
background-color: #ff5474;
border-radius: 50%;
}
.modal .ogba .content .item .middle{
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 20rpx;
}
.modal .ogba .content .item .middle .top{
width: 100%;
font-size: 30rpx;
color: #333;
display: flex;
justify-content: flex-start;
align-items: center;
}
.modal .ogba .content .item .middle .top text{
font-size: 26rpx;
color: #8a8a8a;
margin-left: 20rpx;
}
.modal .ogba .content .item .middle .bottom{
width: 100%;
font-size: 26rpx;
color: #8a8a8a;
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 5rpx;
}
.modal .ogba .content .item .right{
height: 60rpx;
background-color: #ff5474;
color: #fff;
font-size: 28rpx;
padding: 0 30rpx;
text-align: center;
line-height: 60rpx;
border-radius: 5rpx;
}
.modal .ogba .close{
width: 60rpx;
height: 60rpx;
border-radius: 50%;
position: absolute;
right: -20rpx;
top: -20rpx;
background-color: #e6e6e6;
display: flex;
justify-content: center;
align-items: center;
z-index: 9980;
}
.modal .ogba .close image{
width: 35rpx;
height: 35rpx;
}
相关推荐
微信小程序仿《拼多多》拼团系统源码实现了拼多多部分功能，包括首页列表，热拼，拼单详情等功能，特色：实现了tab标签固定在顶部 目录结构： image — 存放项目图片文件 page — 存放项目页面渲染相关文件 utils —...
在这个项目中，“微信小程序-仿《拼多多》拼团系统源码”是一个实现了类似拼多多拼团功能的源代码包。拼多多作为中国知名的电商平台，其拼团模式深受用户喜爱，通过邀请好友一起购买商品，用户可以享受到更低的价格...
仿拼多多拼团微信小程序源码主要功能模块有： 一键开团， 单独购买， 商品属性， 商城二级分类， 收货地址， 微信支付， 模板消息通知， 快捷分享， 一键收藏， 用户管理。 服务器要求： 服务器支持...
这个"微信小程序-仿《拼多多》拼团系统源码"是一个完整的开发项目，旨在帮助开发者了解并学习如何构建类似拼多多的拼团功能。拼多多作为中国知名的电商平台，其拼团模式是其特色之一，通过让用户集体购买来享受更低...
源码说明：Thinkphp开发微信商城小程序源码拼团小程序源码带后台+前端小程序拼团源码仿拼多多 其它说明： 基于小程序的拼团应用,用户可通过拼团，随时发起拼团活动并分享给好友 拼团是商品营销和售卖的一种方式，...
源码说明：Thinkphp开发微信商城小程序源码拼团小程序源码带后台+前端小程序拼团源码仿拼多多 其它说明： 基于小程序的拼团应用,用户可通过拼团，随时发起拼团活动并分享给好友 拼团是商品营销和售卖的一种方式，...
- 拼多多以其团购模式闻名，允许用户通过邀请朋友一起购买商品以获取更优惠的价格，这需要在小程序中实现社交分享和拼团功能。 - 页面设计上，拼多多商城通常包含商品列表、商品详情、购物车、订单管理、支付等...
仿拼多多小程序商城源码 源码描述： 一、源码特点 1、精致电商，来客， [ 微信 + 支付宝 + 百度 + 头条 ] 小程序 + APP + 公众号 + PC + H5，注重界面美感与用户体验，打造独特电商系统生态圈，不可多得的二开神器...
微信小程序源码 电商-拼团 倒计时(学习版)微信小程序源码 电商-拼团 倒计时(学习版)微信小程序源码 电商-拼团 倒计时(学习版)微信小程序源码 电商-拼团 倒计时(学习版)微信小程序源码 电商-拼团 倒计时(学习版)微信...
1. **微信小程序开发**：微信仿拼多多的实现离不开微信小程序，需要掌握微信开发者工具的使用，理解小程序的生命周期，熟练运用WXML和WXSS进行界面布局，以及使用JavaScript处理业务逻辑。 2. **数据库设计**：拼...
【微信拼团购微信小程序源码.zip】是一个包含微信小程序开发源代码的压缩包，主要用于实现类似拼多多的拼团购物功能。微信小程序是一种轻量级的应用形式，用户无需下载安装即可在微信内使用，大大提升了用户体验。这...
Thinkphp开发微信商城小程序源码拼团小程序源码带后台+前端小程序拼团源码仿拼多多 源码说明：Thinkphp开发微信商城小程序源码拼团小程序源码带后台+前端小程序拼团源码仿拼多多 其它说明： 基于小程序的拼团应用,...
【标题】：“拼多多领券小程序（多多金宝）”是一个基于拼多多平台的优惠券领取工具，旨在帮助用户更便捷地获取拼多多商城的商品优惠券，从而实现更经济实惠的购物体验。该程序可能采用微信小程序的形式，让用户在...
【标题解析】：“shangcheng-微信小程序微商城（仿拼多多）”这个标题表明这是一个开源项目，主要目标是创建一个类似拼多多的微型购物平台，专为微信小程序设计。微信小程序是一种轻量级的应用形式，无需下载安装...
仿拼多多拼团开发版更新1.21版 实测完整版 可以正常运行！
源码说明：Thinkphp开发微信商城小程序源码拼团小程序源码带后台+前端小程序拼团源码仿拼多多 其它说明： 基于小程序的拼团应用,用户可通过拼团，随时发起拼团活动并分享给好友 拼团是商品营销和售卖的一种方式，...
3. 营销策略：京东客的精准推广和拼多多的社交裂变策略在小程序中得到融合，通过拼团、砍价等活动，激发用户的购物热情，提高转化率。 三、商业应用价值 1. 提升销售：京东客+拼多多小程序结合双方优势，通过精准...
该资源是关于拼多多客、京东客以及蘑菇街电商小程序的V9.1.0版本的前端与后端源代码。这个版本的更新可能包含了优化的性能、新增的功能以及修复的已知问题，旨在提升用户体验和商家运营效率。 首先，我们要理解“小...