1
This commit is contained in:
魏啾
@@ -39,7 +39,11 @@
|
||||
y: 0
|
||||
},
|
||||
screenWidth: 0,
|
||||
itemStyle: []
|
||||
itemStyle: [
|
||||
{
|
||||
transform:''
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -50,16 +54,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
mounted() {
|
||||
var macInfo = uni.getSystemInfoSync();
|
||||
this.screenWidth = macInfo.screenWidth;
|
||||
// 计算swiper样式
|
||||
this.swiperList.forEach((item, index) => {
|
||||
this.itemStyle.push(this.getStyle(index))
|
||||
})
|
||||
this.timersetInterval = setInterval(() => {
|
||||
this.endMove()
|
||||
}, 2000);
|
||||
// this.timersetInterval = setInterval(() => {
|
||||
// this.endMove()
|
||||
// }, 2000);
|
||||
},
|
||||
methods: {
|
||||
getStyle(e) {
|
||||
@@ -97,7 +101,6 @@
|
||||
this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
|
||||
},
|
||||
endMove(e) {
|
||||
console.log(e, 86)
|
||||
var newList = JSON.parse(JSON.stringify(this.itemStyle))
|
||||
// if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
|
||||
// 向左滑动
|
||||
@@ -116,8 +119,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
.swiperPanel {
|
||||
margin: 20rpx 0;
|
||||
height: 100rpx;
|
||||
height: 28rpx;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
174
components/listitem.vue
Normal file
174
components/listitem.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="contentone flex-center">
|
||||
<image class="contentoneimage" src="@/static/ewm.png" mode="aspectFill"></image>
|
||||
<text class="contentonetext">精选推荐</text>
|
||||
</view>
|
||||
<view class="contenttow flex-between">
|
||||
<view class="contenttowitem" v-for="(item,index) in 6">
|
||||
<image class="contenttowitemimage" src="@/static/icon_cart.png" mode=""></image>
|
||||
<view class="contenttowitemtiter">
|
||||
库迪咖啡|全场饮品任选券|多店美团可用
|
||||
</view>
|
||||
<view class="contenttowitemone flex-between">
|
||||
<view class="contenttowitemone_dingwei flex-start">
|
||||
<image class="contenttowitemone_dingweiimage"
|
||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/dw.png" mode="aspectFill"></image>
|
||||
<view class="contenttowitemone_dingweinumer">
|
||||
2.5km
|
||||
</view>
|
||||
</view>
|
||||
<view class="contenttowitemone_text">
|
||||
已售192.9万
|
||||
</view>
|
||||
</view>
|
||||
<view class="contenttowitemtow flex-start">
|
||||
<view class="contenttowitemtow_one">
|
||||
券后¥7.22
|
||||
</view>
|
||||
<view class="contenttowitemtow_tow">
|
||||
3.2折
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
opacity: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
titleshow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clicknavigateBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 32rpx;
|
||||
|
||||
.contentone {
|
||||
.contentoneimage {
|
||||
width: 32.12rpx;
|
||||
height: 36.13rpx;
|
||||
}
|
||||
|
||||
.contentonetext {
|
||||
margin-left: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.contenttow {
|
||||
width: 100%;
|
||||
|
||||
.contenttowitem {
|
||||
margin-top: 32rpx;
|
||||
width: 316rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
|
||||
.contenttowitemimage {
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.contenttowitemtiter {
|
||||
padding: 0 20rpx;
|
||||
margin-top: 8rpx;
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.contenttowitemone {
|
||||
padding: 0 20rpx;
|
||||
.contenttowitemone_dingwei {
|
||||
margin-top: 6rpx;
|
||||
.contenttowitemone_dingweiimage {
|
||||
width: 17.9rpx;
|
||||
height: 21.65rpx;
|
||||
}
|
||||
|
||||
.contenttowitemone_dingweinumer {
|
||||
margin-left: 12rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.contenttowitemone_text {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.contenttowitemtow {
|
||||
padding: 0 20rpx 8rpx 20rpx;
|
||||
|
||||
.contenttowitemtow_one {
|
||||
margin-top: 6rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
|
||||
.contenttowitemtow_tow {
|
||||
margin-top: 6rpx;
|
||||
margin-left: 6rpx;
|
||||
padding: 2rpx 14rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid #FF4C11;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #FF4C11;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -19,7 +19,7 @@
|
||||
<view class="navbar_tow_one flex-start">
|
||||
<u-icon name="arrow-left" color="#000" size="40"></u-icon>
|
||||
</view>
|
||||
<view class="navbar_tow_tow" v-if="opacity">
|
||||
<view class="navbar_tow_tow" v-if="opacity || titleshow">
|
||||
{{title}}
|
||||
</view>
|
||||
</view>
|
||||
@@ -42,6 +42,10 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
titleshow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
|
||||
86
components/tony-scroll-self/tony-scroll-self.vue
Normal file
86
components/tony-scroll-self/tony-scroll-self.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="scroll_box">
|
||||
<swiper class="swiper" circular="true" vertical="true" display-multiple-items="4" :autoplay="autoplay"
|
||||
:interval="interval" :duration="duration">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<view class="swiper-item">
|
||||
<view class="line1">{{item.nickName}}</view>
|
||||
<view class="line2">
|
||||
<text>抽到</text>
|
||||
<text class="line2-amount">{{item.value}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
interval: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
},
|
||||
datalist: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
datalist: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.list = val
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.swiper {
|
||||
height: 400rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-item::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.swiper-item .line1 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.swiper-item .line2 {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.swiper-item .line2 .line2-amount {
|
||||
color: #EF4A4A;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user