Skip to content

G
get-up-early
Commit 49a75dd0 by baihong
Options

add:瀑布流

parent 78d39c6e
Showing with 175 additions and 15 deletions
components/page-header.vue
......@@ -43,7 +43,8 @@
<style scoped lang="scss">
.nav {
position: fixed;
// position: fixed;
position: absolute;
top: 0;
left: 0;
width: 100vw;
......
pages/activities/activities.vue
......@@ -122,7 +122,42 @@
</view>
<view class="img-box">
<p>敢于微笑</p>
<u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index">
</u-lazy-load>
<view class="demo-title">
<u-image width="40rpx" height="40rpx" shape='circle' :src="src"></u-image>
<text class="name">realme</text>
<u-image width="25rpx" height="24rpx"
:src="require('../../static/imgs/ic_liuyan_01@2x.png')"></u-image>
<text class="msg">19</text>
<u-image width="25rpx" height="24rpx"
:src="require('../../static/imgs/ic_good@2x.png')"></u-image>
<text class="dz">23</text>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index">
</u-lazy-load>
<view class="demo-title">
<u-image width="40rpx" height="40rpx" shape='circle' :src="src"></u-image>
<text class="name">realme</text>
<u-image width="25rpx" height="24rpx"
:src="require('../../static/imgs/ic_liuyan_01@2x.png')"></u-image>
<text class="msg">19</text>
<u-image width="25rpx" height="24rpx"
:src="require('../../static/imgs/ic_good@2x.png')"></u-image>
<text class="dz">23</text>
</view>
</view>
</template>
</u-waterfall>
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
</view>
</view>
</template>
......@@ -135,25 +170,108 @@
},
data() {
return {
active:true,
active: true,
src: 'https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF',
current: 0,
loadStatus: 'loadmore',
flowList: [],
list: [{
name: '审核中'
}, {
name: '已通过'
}, {
name: '已拒绝'
}],
current: 0
price: 35,
title: '北国风光，千里冰封，万里雪飘',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
},
{
price: 75,
title: '望长城内外，惟余莽莽',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
},
{
price: 385,
title: '大河上下，顿失滔滔',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
},
{
price: 784,
title: '欲与天公试比高',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
},
{
price: 7891,
title: '须晴日，看红装素裹，分外妖娆',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
},
{
price: 2341,
shop: '李白杜甫白居易旗舰店',
title: '江山如此多娇，引无数英雄竞折腰',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
},
{
price: 661,
shop: '李白杜甫白居易旗舰店',
title: '惜秦皇汉武，略输文采',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
},
{
price: 1654,
title: '唐宗宋祖，稍逊风骚',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 1678,
title: '一代天骄，成吉思汗',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 924,
title: '只识弯弓射大雕',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
{
price: 8243,
title: '俱往矣，数风流人物，还看今朝',
shop: '李白杜甫白居易旗舰店',
image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
},
]
};
},
computed: {
onLoad() {
this.addRandomData();
},
onLoad(option) {
onReachBottom() {
this.loadStatus = 'loading';
// 模拟数据加载
setTimeout(() => {
this.addRandomData();
this.loadStatus = 'loadmore';
}, 1000)
},
methods: {
addRandomData() {
for (let i = 0; i < 10; i++) {
let index = this.$u.random(0, this.list.length - 1);
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
let item = JSON.parse(JSON.stringify(this.list[index]))
item.id = this.$u.guid();
this.flowList.push(item);
}
},
remove(id) {
this.$refs.uWaterfall.remove(id);
},
clear() {
this.$refs.uWaterfall.clear();
},
change(index) {
this.current = index;
},
......@@ -181,6 +299,7 @@
.app {
background: #f5f7f9;
height: 100vh;
p {
font-size: 32rpx;
font-family: OpenSans;
......@@ -188,6 +307,7 @@
line-height: 43rpx;
text-align: center;
}
.img-box {
width: 690rpx;
padding: 30rpx;
......@@ -195,10 +315,44 @@
background: #FFFFFF;
border-radius: 7px;
margin: 0 auto;
.demo-warter {
margin: 2rpx;
background-color: #ffffff;
padding: 4rpx;
position: relative;
width: 315rpx;
.demo-title {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
text {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #555555;
//line-height: 33rpx;
}
.name{
color: #000000;
margin: 0 30rpx 0 6rpx;
}
.msg {
margin: 0 15rpx 0 6rpx;
}
.dz{
margin-left: 6rpx;
}
}
}
p {
text-align: left;
margin-bottom: 30rpx;
}
}
.main-box {
width: 690rpx;
box-sizing: border-box;
......@@ -206,7 +360,8 @@
border-radius: 7rpx;
padding: 27rpx 21rpx 50rpx 23rpx;
margin: -40rpx auto 20rpx auto;
.btn{
.btn {
width: 398rpx;
height: 74rpx;
background: #FFC915;
......@@ -221,15 +376,18 @@
align-items: center;
justify-content: center;
}
.days {
display: flex;
margin-top: 70rpx;
.line {
width: 60rpx;
height: 3rpx;
background: #DCDCDC;
margin-top: 74rpx;
}
.day-box {
display: flex;
flex-direction: column;
......@@ -237,6 +395,7 @@
position: relative;
min-height: 74rpx;
justify-content: flex-end;
.cor {
width: 40rpx;
height: 40rpx;
......
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