wxml

<view class="tabs"><view class="tab-item" wx:for="{{tabs}}" wx:key="*this" bindtap="tabTap"><p>{{item.title}}</p></view>
</view>

wxss

待完善

js

Page({/*** 页面的初始数据*/data: {tabs: [{title: '技术开发',title2: '小程序开发进阶',imgUrl: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg',desc: '本视频系列课程，由腾讯课堂NEXT学院与微信团队联合出品，通过实战案例，深入浅出地进行讲解。',},{title: '产品解析',title2: '微信小程序直播',imgUrl: 'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png',desc: '微信小程序直播系列课程持续更新中，帮助大家更好地理解、应用微信小程序直播功能。',},{title: '运营规范',title2: '常见问题和解决方案',imgUrl: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg',desc: '提高审核质量',},{title: '营销经验',desc: '本课程共四节，将分阶段为开发者展示如何开通流量主功能、如何接入广告组件、不同类型小程序接入的建议，以及如何通过工具调优小程序变现效率。',},{title: '高校大赛',imgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',desc: '微信小程序应用开发赛',},],currentData: [],},tabTap(e) {this.setData({currentData: e.currentTarget.dataset.item})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({currentData: this.data.tabs[0]})}, 
})