推广小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

95 lines
2.1 KiB

<template>
<view>
<view class="head-box"></view>
<uv-navbar autoBack title="主理人签到" leftIconColor="#fff" :bgColor="bgColor" height="100rpx" :titleStyle="{color:'#fff'}"></uv-navbar>
<uv-sticky offsetTop="350rpx" :bgColor="bgColor">
<uv-tabs :scrollable="false" @click="tabs" :list="tabList" lineWidth="40" :current="tabCurrent"
:lineColor="`url(${lineBg}) 100% 100%`"
:activeStyle="{color: '#FD5C5C', fontWeight: 'bold',transform: 'scale(1.05)'}"
:inactiveStyle="{color: '#999', transform: 'scale(1)'}"
itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></uv-tabs>
</uv-sticky>
<view class="content">
<zlx-item
v-for="(item, index) in list"
:key="index"
:item="item"
showBottom
@qiandaoClick="qiandaoClick(item.id)"></zlx-item>
</view>
</view>
</template>
<script>
import zlxItem from '@/components/zhaomu/zlx-item.vue'
import listMixin from '@/mixins/list.js'
export default{
mixins: [listMixin],
components:{
zlxItem
},
data() {
return {
lineBg: require('@/static/image/cart/tabIcon.png'),
bgColor:'transparent',
mixinsListApi : 'activityMemberPageList',//activityMemberPageList getTwoPageList
tabCurrent : 0,
tabList: [
{
id: 0,
name: '活动'
},
{
id: 1,
name: '旅行'
},
],
}
},
onPageScroll(e) {
if(e.scrollTop > 50) {
this.bgColor = '#49070c'
}else{
this.bgColor = 'transparent'
}
},
onLoad() {
this.queryParams.type = 0
},
methods:{
tabs(e) {
this.tabCurrent = e.index
this.queryParams.type = e.id
this.getData()
},
qiandaoClick(id) {
uni.navigateTo({
url:`/pages_my/qiandao-list?id=${id}&type=${this.queryParams.type}`
})
},
}
}
</script>
<style lang="scss">
page {
background-color: #060504;
}
</style>
<style lang="scss" scoped>
.head-box {
background: url('@/static/image/nav-bg.png') no-repeat;
background-size: 100% 100%;
width: 100%;
height: 534rpx;
position: absolute;
z-index: -1;
}
.content {
margin-top: 40rpx;
padding: 0 30rpx;
padding-top: calc(var(--status-bar-height) + 110rpx);
}
</style>