<template>
<view>
<view>
<scroll-view scroll-x>
<view :class="tabIndex == index ? 'active':''" v-for="(item,index) in navList"
:key="index" @click="tapTab(index)">
{{ item.text }}
</view>
</scroll-view>
<view>
<swiper style="height:300px" :current="tabIndex" @change="tabChange">
<swiper-item v-for="(items,index) in newList" :key="index">
<scroll-view scroll-y>
<view>
<view>
<view>
<image src="/images/icon-test.png" mode="aspectFit">
</image>
</view>
<text>
1小时
</text>
</view>
<view>
<text>
听完我会怀念此刻的我们这首歌曲，感恩所有的相遇和陪伴！
</text>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</view>
</template>
<script>
export
default {
data() {
return {
tabIndex:
0,
navList: [{
text: '全部'
},
{
text: '骑行'
},
{
text: '读书'
},
{
text: '健身'
},
{
text: '旅游'
},
{
text: '新闻'
},
{
text: '茶艺'
},
{
text: '汽车'
},
{
text: '军事'
}],
newList: [{
title: '全部'
},
{
title: '骑行'
},
{
title: '读书'
},
{
title: '健身'
},
{
title: '旅游'
},
{
title: '新闻'
},
{
title: '茶艺'
},
{
title: '汽车'
},
{
title: '军事'
}]
}
},
methods: {
tapTab(index) {
this.tabIndex = index console.log(this.tabIndex)
},
tabChange(e) {
this.tabIndex = e.detail.current
},
doLogin() {
uni.login({
provider: 'weixin',
success: (loginRes) = >{
let code = loginRes.code;
let appId = "wx0b4443ef5d92d651";
let secret = "5d761ba897fb2c96c0189ff48fd070eb";
uni.request({
url: "https://api.weixin.qq.com/sns/jscode2session?appid=" + appId + "&secret=" + secret + "&js_code=" + code + "&grant_type=authorization_code"
}).then(data = >{
console.log(data.data.openid)
})
}
})
}
}
}
</script>
<style>
page{ height:100%; } .home{ .nav-scroll{ height: 80rpx; border-bottom:1px
solid #eee; white-space: nowrap; position: fixed; top:var(--window-top);
left:0; z-index: 10; .item{ font-size: 26rpx; line-height: 80rpx; display:
inline-block; padding: 0 30rpx; color: #969696; &.active{ font-weight:
bold; color: red; } } } .content{ margin-top: 100rpx; padding: 20rpx; .new-box{
margin:10rpx; } .con-msg{ font-size:30rpx; } .con-img{ margin-top:10rpx;
} .con-img image{ width:100%; border-radius: 6px; } .con-list{ display:
flex; justify-content: space-between; .list-img-lst{ width:60rpx; height:60rpx;
overflow: hidden; image{ width:100%; height:100%; } } } } }
</style>