Leadfyy.co
/
uniapp-hainan
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[新增] 首页UI

test
邓平艺 4 years ago
parent
6698496e34
commit
1ae5a8aed5
5 changed files with 162 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      common/mixin.js
  2. 4
      common/styles/common.css
  3. 153
      pages/index/index.vue
  4. 2
      uview-ui/components/u-lazy-load/u-lazy-load.vue
  5. 3
      uview-ui/components/u-tabs/u-tabs.vue

4
common/mixin.js
View File

@ -1,11 +1,11 @@
export default{
data(){
return {
$pageScrollTop: 0, // 页面距离顶部的距离
pageScrollTop: 0, // 页面距离顶部的距离
}
},
onPageScroll(res) {
this.$pageScrollTop = res.scrollTop;
this.pageScrollTop = res.scrollTop;
},
methods: {
$isRight(val){

4
common/styles/common.css
View File

@ -219,6 +219,10 @@
font-weight: bold;
}
.lf-line-through{
text-decoration: line-through;
}
.lf-opacity{
opacity: .5;
}

153
pages/index/index.vue
View File

@ -51,6 +51,10 @@
<view class="lf-row-between">
<view class="max-recomm-img">
<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
<view class="recomm-title">
<view class="lf-line-2">土耳其双人游飞机往返酒店五星级各大热门景点豪华双人游纯江湖救急</view>
<view class="lf-font-42 lf-font-bold lf-m-t-10" style="color: #FF0000;">￥3999.00</view>
</view>
</view>
<view>
<view class="recomm-img">
@ -78,6 +82,47 @@
<u-tabs :list="tab_list" :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
</view>
</view>
<!-- 商品列表-瀑布流 -->
<view v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex" v-if="current == tabIndex" style="padding: 0 20rpx;">
<u-waterfall v-model="tabItem.list" :ref="'uWaterfall-'+ tabIndex">
<template v-slot:left="{leftList}">
<view class="list-warter" v-for="(item, index) in leftList" :key="index">
<u-lazy-load threshold="-450" :image="item.image" :index="index">
<view class="list-label">已售8777</view>
</u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.title}}
</view>
<view class="list-price">
<text>{{item.price}}元</text>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text>
</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="list-warter" v-for="(item, index) in rightList" :key="index">
<u-lazy-load threshold="-450" :image="item.image" :index="index">
<view class="list-label">已售8777</view>
</u-lazy-load>
<view class="lf-p-20">
<view class="list-title">
{{item.title}}
</view>
<view class="list-price">
<text>{{item.price}}元</text>
<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">¥399.00</text>
</view>
</view>
</view>
</template>
</u-waterfall>
<u-loadmore v-if="tabItem.list.length" :status="tabItem.loading_text" @loadmore="addRandomData"></u-loadmore>
<lf-nocontent v-else></lf-nocontent>
</view>
<!-- 回到顶部 -->
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
</view>
</template>
@ -109,12 +154,28 @@
}
},
onLoad() {
// this.addRandomData();
},
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);
}
},
tabChange(current){
this.current = current;
},
pageChange(event){
console.log(event)
this.current = event.detail.current;
}
},
onReachBottom() {
},
onPullDownRefresh(){
uni.stopPullDownRefresh();
@ -225,6 +286,96 @@
.max-recomm-img{
width: 455rpx;
height: 455rpx;
position: relative;
.recomm-title{
// height: 142rpx;
height: max-content;
width: 100%;
background-color: rgba(0,0,0,0.65);
box-sizing: border-box;
padding: 15rpx;
position: absolute;
bottom: 0;
color: #FFFFFF;
}
}
}
// ====
.list-warter {
border-radius: 8px;
margin: 10px 5px;
margin-top: 0px;
background-color: #ffffff;
// padding: 8px;
position: relative;
overflow: hidden;
}
.u-close {
position: absolute;
top: 32rpx;
right: 32rpx;
}
.list-image {
width: 100%;
border-radius: 4px;
}
.list-title {
font-size: 28rpx;
font-weight: bold;
color: $u-main-color;
}
.list-label{
position: absolute;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
width: 140rpx;
height: 48rpx;
border-radius: 20rpx 0rpx 0rpx 0rpx;
font-size: 22rpx;
color: #FFFFFF;
line-height: 48rpx;
text-align: center;
}
.list-tag {
display: flex;
margin-top: 5px;
}
.list-tag-owner {
background-color: $u-type-error;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 20rpx;
line-height: 1;
}
.list-tag-text {
border: 1px solid $u-type-primary;
color: $u-type-primary;
margin-left: 10px;
border-radius: 50rpx;
line-height: 1;
padding: 4rpx 14rpx;
display: flex;
align-items: center;
border-radius: 50rpx;
font-size: 20rpx;
}
.list-price {
font-size: 30rpx;
color: $u-type-error;
margin-top: 5px;
}
// ====
</style>

2
uview-ui/components/u-lazy-load/u-lazy-load.vue
View File

@ -12,6 +12,7 @@
<image :style="{borderRadius: borderRadius + 'rpx', height: imgHeight}" class="u-lazy-item error" v-else :src="errorImg"
:mode="imgMode" @load="errorImgLoaded" @tap="clickImg"></image>
</view>
<slot></slot>
</view>
</template>
@ -229,6 +230,7 @@
.u-wrap {
background-color: #eee;
overflow: hidden;
position: relative;
}
.u-lazy-item {

3
uview-ui/components/u-tabs/u-tabs.vue
View File

@ -84,7 +84,7 @@
// 选中项的主题颜色
activeColor: {
type: String,
default: '#2979ff'
default: '#1998FE'
},
// 未选中项的颜色
inactiveColor: {
@ -230,6 +230,7 @@
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
if (index == this.currentIndex) {
style.color = this.activeColor;
style.fontSize = '36rpx';
// 给选中的tab item添加外部自定义的样式
style = Object.assign(style, this.activeItemStyle);
} else {

Write Preview
Loading…
Cancel
Save