在项目开发中,我们经常会对数据进行分组并且循环加载,像今日头条app首页那样,今天动手写了个类似的demo,效果图如下:
主要涉及到:
scroll-view可滚动视图区域组件,swiper滑块视图容器,以及for循环列表数据。
第一步:打开微信开发者工具,新建一个小程序项目,或者直接在已有的小程序项目里新建一个test文件夹,文件夹目录如下:
test.wxml代码:
<view>
<scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
<block wx:for-items="{{newsTab}}">
<view data-current="{{index}}" class="tab-item {{currentTab == index ?'active':''}}" bindtap="swichNav" >
{{item}}
</view>
</block>
</scroll-view>
<swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx">
<swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
<scroll-view scroll-y="true" class="scoll-h">
<block wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:key="*this">
<view class="item">
<view class="img">
<image src="{{authorList.img}}"></image>
</view>
<view class="author-info">
<view class="name">{{authorList.name}}</view>
<view class="tag">{{authorList.tag}}</view>
<view class="answerHistory">{{authorList.answer}}个回答,{{authorList.listen}}人听过 </view>
</view>
<navigator url="" class="shouting">关注</navigator>
</view>
</block>
</scroll-view>
</swiper-item>
</swiper>
</view>
test.js代码:
var app = getApp();
Page({
data: {
winHeight: "",//窗口高度
currentTab: 0, //预设默认选中的栏目
scrollLeft: 0, //tab滚动条距离左侧距离
newsTab: ["健康", "情感", "职场", "育儿", "文学","青葱","科技","达人"],
authorList: {
img: "http://ookzqad11.bkt.clouddn.com/avatar.png",
name: "欢顔",
tag: "知名情感博主",
answer: 134,
listen: 2234
}
},
// 滚动切换标签样式
switchTab: function (e) {
this.setData({
currentTab: e.detail.current
});
this.checkCor();
},
// 点击tab切换当前页时改变样式
swichNav: function (e) {
var cur = e.target.dataset.current;
if (this.data.currentTab == cur) {
return false;
}
else {
this.setData({
currentTab: cur
})
}
},
//判断当前滚动超过一屏时,设置tab向左滚动。
checkCor: function () {
if (this.data.currentTab > 4) {
this.setData({
scrollLeft: 300
})
} else {
this.setData({
scrollLeft: 0
})
}
},
onLoad: function () {
var that = this;
// 高度自适应
wx.getSystemInfo({
success: function (res) {
var clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var calc = clientHeight * rpxR - 180;
that.setData({
winHeight: calc
});
}
});
}
})
test.wxss代码:
.tab-h {
height: 100rpx;
width: 100%;
box-sizing: border-box;
overflow: hidden;
line-height: 80rpx;
background: #f7f7f7;
font-size: 16px;
white-space: nowrap;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.tab-item {
margin: 0 36rpx;
display: inline-block;
}
.tab-item.active {
color: #4675f9;
position: relative;
}
.tab-item.active:after {
content: "";
display: block;
height: 8rpx;
width: 66rpx;
background: #4675f9;
position: absolute;
bottom: 0;
left: 5rpx;
border-radius: 16rpx;
}
.tab-content {
margin-top: 100rpx;
}
.tab-content .author-info{
font-size: 12px;
flex-grow: 3;
color: #b0b0b0;
line-height: 1.5em;
}
.tab-content .author-info .name {
font-size: 16px;
color: #000;
margin-bottom: 6px;
}
.item {
display: flex;
width: 100%;
padding: 30rpx;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid #f2f2f2;
}
.img {
width: 100rpx;
height: 100rpx;
position: relative;
padding-right: 30rpx;
}
.img image {
width: 100%;
height: 100%;
}
.shouting {
width: 120rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
font-size: 14px;
border-radius: 60rpx;
border: 1px solid #4675f9;
color: #4675f9;
}
.scoll-h {
height: 100%;
}
原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
网友评论