Skip to content

M
mini-program-wepy
Commit 91af85aa authored by ziyu's avatar ziyu
Browse files
Options

improvement: 商品列表样式优化

parent 3503f01d
Show whitespace changes
Inline Side-by-side
Showing with 101 additions and 69 deletions
src/app.wpy
View file @ 91af85aa
<style>
page {
font-family: 'PingFangSC-Regular';
}
</style>
<script>
import wepy from '@wepy/core';
import eventHub from './common/eventHub';
......
src/pages/index.wpy
View file @ 91af85aa
......@@ -72,64 +72,63 @@
.footer {
position: absolute;
z-index: 9;
bottom: 50px;
bottom: 20rpx;
width: 100%;
}
.footswiper {
height: 360rpx;
}
.list-item{
width:100%;
height: 120px;
width:220rpx;
/*height: 330rpx;*/
background-color:#fff;
position: absolute;
bottom:5px;
box-sizing: border-box;
border-radius: 5rpx;
transform: scale(0.7,0.7) translateY(28px);
border-radius: 10rpx;
transform: scale(0.7,0.7) translateY(65rpx);
transition: all 0.5s;
padding:10rpx;
padding:10rpx 10rpx 5rpx 10rpx;
margin:0 auto;
margin-top: 2rpx;
position: relative;
}
.list-item image {
width: 95%;
width: 210rpx;
display: block;
height: 85px;
height: 210rpx;
margin:0 auto;
border-radius: 10rpx;
}
.list-item .text {
font-size: 10px;
font-size: 20rpx;
text-overflow: ellipsis;
white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 2; //行数
-webkit-box-orient: vertical;
overflow: hidden;
line-height:24rpx;
margin-top:10rpx;
}
.list-item .goods {
width: 100%;
margin-top: -8px;
position: relative;
.list-item .price{
color:#FF5D15;
font-size:22rpx;
margin-top:2rpx;
}
.goods .price{
color:darkorange;
font-size: 10px;
}
.goods .buy{
text-align: right;
color: gainsboro;
font-size: 8px;
position: absolute;
right:0;
top:8px;
.list-item .buy{
font-size: 16rpx;
color:#AAA;
}
.list-item.subright {
transform: scale(0.85,0.85) translateY(12px) translateX(15rpx);
transform: scale(0.85,0.85) translateY(26rpx) translateX(25rpx);
}
.list-item.subleft {
transform: scale(0.85,0.85) translateY(12px) translateX(-15rpx);
transform: scale(0.85,0.85) translateY(26rpx) translateX(-25rpx);
}
.list-item.select{
transform: scale(1,1);
border-radius: 5rpx;
bottom: 2rpx;
}
.list-item.delete {
opacity:0;
transform:translateY(-100px)
transform:translateY(-220rpx)
}
.leftcont{
position: absolute;
......@@ -160,16 +159,20 @@
}
</style>
<wxs module="tools">
function computClass (current,index,length) {
var allclass = "";
if(current==index)
allclass='subleft';
// 无限循环当current为最后一个的时候，select就应该是0 例如长度为10，当current为9时，select就应该是0
if(current+1==index || (current==length-1 && index==0) ) allclass = "select";
// if(current+1==index || (current==length-1 && index==0) ) allclass = "select";
// 无限循环当current为最后一个/两个的时候的时候，例如长度为10，当current为8/9时，select就应该是1/0
if(current+2 == index|| (current>=length-2 && index==current-length+2))
allclass='subright';
//if(current+2 == index|| (current>=length-2 && index==current-length+2))
//allclass='subright';
function computClass (current,index,length) {
var allclass = "";
if(current-1 == index||(current == 0&&index==length-1))
allclass='subleft';
if(current==index)
allclass='select';
if(current+1==index || (current==length-1 && index==0) )
allclass = "subright";
return allclass;
};
module.exports = {
......@@ -204,27 +207,29 @@
</view>
<view class="footer">
<swiper
class="footswiper"
display-multiple-items="{{swiperItem}}"
current="{{current}}"
bindchange="moveSwiper"
bindanimationfinish="swipermoveDone"
circular="{{circular}}"
next-margin="90rpx"
previous-margin="140rpx"
next-margin="120rpx"
catch:touchmove
>
<!--bindtouchstart="touchStart"-->
<!--bindtouchend="touchEnd"-->
<swiper-item wx:for="{{list}}" wx:key="index">
<view
data-itemid="{{index}}"
bindtap="toViewPage"
bindtouchstart="touchStart"
bindtouchend="touchEnd"
data-item="{{item}}"
class="list-item {{item.select?'delete':''}} {{tools.computClass(currentIndex,index,list.length)}}"
>
<image src="/static/images/test2.png"></image>
<image src="{{item.imgsrc}}"></image>
<view class="text">{{item.text}}</view>
<view class="goods">
<text class="price">￥99.9</text><text class="buy">2200人购买</text>
</view>
<p class="price">{{item.price}}</p>
<p class="buy">{{item.people}}人购买</p>
</view>
</swiper-item>
</swiper>
......@@ -258,10 +263,10 @@
adlist:[],
current:5,
// userInfo: {},
swiperItem:3,
swiperItem:2,
videoList:[],
length: 4,
circular:false,
circular:true,
topPage:0,
lastPage:0,
currentIndex:5,
......@@ -291,14 +296,14 @@
// {value:2,text:'这是测试的文字-2'},
// {value:3,text:'这是测试的文字-3'},
// {value:4,text:'这是测试的文字-4'},
{value:5,text:'这是测试的文字-5'},
{value:-1,text: '白色条纹马克杯，马克吐温同款-1', imgsrc:'/static/images/test1.jpg', price:'￥912.89',people:2200,sku:'100004549235'},
];
let nextlist=[
{value:11,text:'这是测试的文字11'},
{value:12,text:'这是测试的文字12'},
{value:13,text:'这是测试的文字13'},
{value:14,text:'这是测试的文字14'},
{value:15,text:'这是测试的文字15'},
{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'},
{value:13,text: '白色条纹马克杯，马克吐温同款13', imgsrc:'/static/images/peo1.jpg', price:'￥39.08',people:2200,sku:'100004549235'},
{value:14,text: '白色条纹马克杯，马克吐温同款14', imgsrc:'/static/images/peo2.jpg', price:'￥599.20',people:2200,sku:'100004549235'},
{value:15,text: '白色条纹马克杯，马克吐温同款15', imgsrc:'/static/images/peo3.jpg', price:'￥2399.01',people:2200,sku:'100004549235'},
];
let that = this;
function debounce(func,wait) {
......@@ -336,11 +341,25 @@
}
}
},
toViewPage() {
toViewPage(e) {
let item = e.$wx.currentTarget.dataset.item
// console.log(sku,12)
//解决长按触发tap事件的bug
wx.navigateTo({
wx.navigateToMiniProgram({
appId: 'wx91d27dbf599dff74',
path: 'pages/item/detail/detail?sku='+item.sku, // 跳转小程序的路径
// extraData: { // 需要带的的参数
// "__pid":'Pxk15xcmirwbn'
// },
// 有效值 develop（开发版），trial（体验版），release（正式版）
envVersion: 'release',
success(res) {
console.log('跳转成功');
}
})
/* wx.navigateTo({
url: '/pages/auth'
});
});*/
},
touchStart (event) {
touchDotX = event.touches[0].pageX; // 获取触摸时的原点
......@@ -449,16 +468,16 @@
});
}
this.list = [
{value: 1, text: '这是测试的文字1'},
{value: 2, text: '这是测试的文字2'},
{value: 3, text: '这是测试的文字3'},
{value: 4, text: '这是测试的文字4'},
{value: 5, text: '这是测试的文字5'},
{value: 6, text: '这是测试的文字6'},
{value: 7, text: '这是测试的文字7'},
{value: 8, text: '这是测试的文字8'},
{value: 9, text: '这是测试的文字9'},
{value: 10, text: '这是测试的文字10'}
{value: 1, text: '白色条纹马克杯，马克吐温同款1', imgsrc:'/static/images/test1.jpg', price:'￥399.00',people:2200,sku:'100004549235'},
{value: 2, text: '白色条纹马克杯，马克吐温同款2', imgsrc:'/static/images/test2.png', price:'￥1399.22',people:2200,sku:'2004203'},
{value: 3, text: '白色条纹马克杯，马克吐温同款3', imgsrc:'/static/images/peo1.jpg', price:'￥199.22',people:2200,sku:'17818909707'},
{value: 4, text: '白色条纹马克杯，马克吐温同款4', imgsrc:'/static/images/peo2.jpg', price:'￥134.12',people:2200,sku:'100004549235'},
{value: 5, text: '白色条纹马克杯，马克吐温同款5', imgsrc:'/static/images/peo3.jpg', price:'￥194.22',people:2200,sku:'100004549235'},
{value: 6, text: '白色条纹马克杯，马克吐温同款6', imgsrc:'/static/images/peo1.jpg', price:'￥292.22',people:2200,sku:'100004549235'},
{value: 7, text: '白色条纹马克杯，马克吐温同款7', imgsrc:'/static/images/test1.jpg', price:'￥1399.92',people:2200,sku:'100004549235'},
{value: 8, text: '白色条纹马克杯，马克吐温同款8', imgsrc:'/static/images/test2.png', price:'￥1399.98',people:2200,sku:'100004549235'},
{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: '小明刚刚参与了抽奖'},
......@@ -509,6 +528,10 @@
}
});
},
onShow() {
//从其他小程序回来可以在当前生命周期检测到,但是这个方法，自己的小程序页面返回也会进入
console.log('页面show！！')
},
});
</script>
<config>
......@@ -524,6 +547,10 @@
'star-animation': '~@/components/custom/starAnimation',
'star-animation1': '~@/components/custom/starAnimation1',
'open-animation': '~@/components/custom/openAnimation',
},
"navigateToMiniProgramAppIdList":[
"wx91d27dbf599dff74"
],
}
}
</config>
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