Skip to content

M
mini-program-wepy
Commit 7af26493 authored by ziyu's avatar ziyu
Browse files
Options

improvement: 商品列表优化

parent 46e46a64
Show whitespace changes
Inline Side-by-side
Showing with 67 additions and 48 deletions
src/pages/index.wpy
View file @ 7af26493
......@@ -28,23 +28,47 @@
.content{
position: absolute;
z-index: 9;
bottom: 250px;
bottom: 450rpx;
width: 100%;
color: white;
clear: both;
}
.leftcont {
font-size: 12px;
width: 42%;
float: left;
margin-left: 20rpx;
.rightcont {
font-size: 24rpx;
display:inline-block;
float: right;
margin-right: 30rpx;
color: #fff;
margin-top:10px;
margin-top:20rpx;
}
.rightcont {
.progress {
width: 180rpx;
height:20rpx;
background-color:#fff;
margin-top:10rpx;
color:#666;
position: relative;
text{
position: absolute;
top:0;
left:0;
width: 100%;
height:100%;
background-color: transparent;
text-align: center;
font-size: 18rpx;
line-height: 20rpx;
}
.orange {
height:100%;
background-color: #FF5D15;
}
}
.leftcont {
width: 44%;
float: right;
float: left;
font-size: 12px;
margin-left: 30rpx;
}
.imgwrap{
margin:8px 0;
......@@ -52,21 +76,21 @@
.list-wrapper {
height: 70px;
}
.rightcont .img {
width: 20px;
height: 20px;
.leftcont .img {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
vertical-align: middle;
}
.rightcont .text {
.leftcont .text {
margin-left: 5px;
vertical-align: middle;
border-radius: 20rpx;
display: inline-block;
font-size: 10px;
font-size: 20rpx;
box-sizing: border-box;
padding:6rpx 15rpx;
background-color:rgba(255, 255, 255, 0.2);
background-color:rgba(238, 238, 238, 0.2);
}
.footer {
......@@ -130,10 +154,6 @@
opacity:0;
transform:translateY(-220rpx)
}
.leftcont{
position: absolute;
z-index: 7;
}
.authmodal{
width:100%;
height:100%;
......@@ -182,7 +202,9 @@
<template>
<view class="video-wrapper">
<view id="myvideo">
<video-list :videoList.sync="videoList" bindchange="changeVideo"></video-list>
<video-list :videoList.sync="videoList" bindchange="changeVideo">
</video-list>
</view>
<view class="userInfo">
<image src="{{userInfo.avatarUrl}}" mode="cover" class="userimage"></image>
......@@ -190,11 +212,6 @@
<view class="content">
<!-- <video-sign title="签"></video-sign> -->
<view class="leftcont">
<view>零售价：￥190003.00元</view>
<view>开奖时间：15：20</view>
<view>中奖概率1/3000</view>
</view>
<view class="rightcont">
<swiper class="list-wrapper" vertical="true" circular="true" display-multiple-items="2" autoplay="true" interval="1500">
<swiper-item wx:for="{{adlist}}" wx:key="index" catch:touchmove>
<view class="imgwrap">
......@@ -204,6 +221,14 @@
</swiper-item>
</swiper>
</view>
<view class="rightcont">
<view>奖品库存: 1/8</view>
<view>中奖概率: 1/3000</view>
<view class="progress">
<text>{{progress}}%</text>
<view class="orange" style="{{progressStyle}}"></view>
</view>
</view>
</view>
<view class="footer">
<swiper
......@@ -266,13 +291,15 @@
swiperItem:2,
videoList:[],
length: 4,
circular:true,
circular:false,
topPage:0,
lastPage:0,
currentIndex:5,
authmodal:false,
sign: false,
showAnimation: false,
progress:0,
progressStyle:'',
},
computed: {
......@@ -291,13 +318,6 @@
if(e.$wx.detail.source == 'touch') {
let current = e.$wx.detail.current;
let totalPage = 3;
let newlist = [
// {value:1,text:'这是测试的文字-1'},
// {value:2,text:'这是测试的文字-2'},
// {value:3,text:'这是测试的文字-3'},
// {value:4,text:'这是测试的文字-4'},
{value:-1,text: '白色条纹马克杯，马克吐温同款-1', imgsrc:'/static/images/test1.jpg', price:'￥912.89',people:2200,sku:'100004549235'},
];
let nextlist=[
{value:11,text: '白色条纹马克杯，马克吐温同款11', imgsrc:'/static/images/test1.jpg', price:'￥9.89',people:2200,sku:'100004549235'},
{value:12,text: '白色条纹马克杯，马克吐温同款12', imgsrc:'/static/images/test2.png', price:'￥19.20',people:'2200',sku:'100004549235'},
......@@ -317,7 +337,7 @@
if (callNow) func();
}
}
if(current <= 2) {
/*if(current <= 2) {
debounce(setTimeout(function(){
that.topPage +=1;
if(that.lastPage+that.topPage >= totalPage) {
......@@ -328,7 +348,7 @@
// that.current = current+1;
// that.currentIndex = current+1;
},1000),500);
}
}*/
if(current >= this.list.length-3) {
debounce(setTimeout(function(){
that.lastPage +=1;
......@@ -348,9 +368,6 @@
wx.navigateToMiniProgram({
appId: 'wx91d27dbf599dff74',
path: 'pages/item/detail/detail?sku='+item.sku, // 跳转小程序的路径
// extraData: { // 需要带的的参数
// "__pid":'Pxk15xcmirwbn'
// },
// 有效值 develop（开发版），trial（体验版），release（正式版）
envVersion: 'release',
success(res) {
......@@ -482,16 +499,6 @@
{value: 9, text: '白色条纹马克杯，马克吐温同款9', imgsrc:'/static/images/peo3.jpg', price:'￥1399.78',people:2200,sku:'100004549235'},
{value: 10, text: '白色条纹马克杯，马克吐温同款10', imgsrc:'/static/images/peo2.jpg', price:'￥1399.67',people:2200,sku:'100004549235'}
];
this.adlist = [
{imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小2刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小3刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小4刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小5刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小6刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小7刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小8刚刚参与了抽奖'}
];
let urls = [
'https://www.apple.com/105/media/us/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-tpl-cc-us-20170912_1920x1080h.mp4',
'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4',
......@@ -502,6 +509,18 @@
},
onLoad () {
let that = this;
this.progress = 47;
this.progressStyle = 'width:'+this.progress+'%';
this.adlist = [
{imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小2刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小3刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小4刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小5刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小6刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小7刚刚参与了抽奖'},
{imgsrc: '/static/images/test1.jpg', text: '小8刚刚参与了抽奖'}
];
// console.log(this.$app.$options.globalData.info,111)
//如果已经存在store里就不用再获取用户信息了
if(this.userInfo) return;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment