<view class="page">
<view class="page">
<view class="page__bd">
<view class="weui-tab">
<view class="weui-navbar">
<block wx:for-items="{{voteTabs}}" wx:key="{{index}}">
<view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
<view class="weui-navbar__title">{{item}}</view>
</view>
</block>
<view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
</view>
<view class="weui-tab__panel">
<view class="weui-tab__content" hidden="{{activeIndex != 0}}">
<!-- class list -->
<view class="index-bd class-list">
<view class="kind-list">
<block wx:for-items="{{coursesSet1}}" wx:key="{{item.id}}">
<view class="kind-list-item">
<view id="{{item.courseNo}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="noteGraph" data-evaluation="{{item.evaluation}}">
<view class="kind-list-text">
<text class="class-list-item-title">{{item.courseName}}</text>
<text class="class-list-item-content">n{{item.courseDesc}}</text>
</view>
<view class="evaluation-text">综合评价</view>
<image class="kind-list-img" src="../resources/kind/logo.png"></image>
</view>
<view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
<view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
<block wx:for-items="{{item.evaluation}}" wx:for-item="eva" wx:key="*item">
<navigator url=".." class="navigator">
<view class="navigator-text">{{eva}}</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
<view class="weui-tab__content" hidden="{{activeIndex != 1}}">
<!-- class list -->
<view class="index-bd class-list">
<view class="kind-list">
<block wx:for-items="{{coursesSet2}}" wx:key="{{item.id}}">
<view class="kind-list-item">
<view id="{{item.courseNo}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="noteGraph" data-evaluation="{{item.evaluation}}">
<view class="kind-list-text">
<text class="class-list-item-title">{{item.courseName}}</text>
<text class="class-list-item-content">n{{item.courseDesc}}</text>
</view>
<view class="evaluation-text">综合评价</view>
<image class="kind-list-img" src="../resources/kind/logo.png"></image>
</view>
<view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
<view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
<block wx:for-items="{{item.evaluation}}" wx:for-item="eva" wx:key="*item">
<navigator url=".." class="navigator">
<view class="navigator-text">{{eva}}</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
<view class="weui-tab__content" hidden="{{activeIndex != 2}}">
<!-- class list -->
<view class="index-bd class-list">
<view class="kind-list">
<block wx:for-items="{{coursesSet3}}" wx:key="{{item.id}}">
<view class="kind-list-item">
<view id="{{item.courseNo}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="noteGraph" data-evaluation="{{item.evaluation}}">
<view class="kind-list-text">
<text class="class-list-item-title">{{item.courseName}}</text>
<text class="class-list-item-content">n{{item.courseDesc}}</text>
</view>
<view class="evaluation-text">综合评价</view>
<image class="kind-list-img" src="../resources/kind/logo.png"></image>
</view>
<view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
<view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
<block wx:for-items="{{item.evaluation}}" wx:for-item="eva" wx:key="*item">
<navigator url=".." class="navigator">
<view class="navigator-text">{{eva}}</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
<view class="weui-tab__content" hidden="{{activeIndex != 3}}">
<!-- class list -->
<view class="index-bd class-list">
<view class="kind-list">
<block wx:for-items="{{coursesSet4}}" wx:key="{{item.id}}">
<view class="kind-list-item">
<view id="{{item.courseNo}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="noteGraph" data-evaluation="{{item.evaluation}}">
<view class="kind-list-text">
<text class="class-list-item-title">{{item.courseName}}</text>
<text class="class-list-item-content">n{{item.courseDesc}}</text>
</view>
<view class="evaluation-text">综合评价</view>
<image class="kind-list-img" src="../resources/kind/logo.png"></image>
</view>
<view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
<view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
<block wx:for-items="{{item.evaluation}}" wx:for-item="eva" wx:key="*item">
<navigator url=".." class="navigator">
<view class="navigator-text">{{eva}}</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
<view class="weui-tab__content" hidden="{{activeIndex != 4}}">
<!-- class list -->
<view class="index-bd class-list">
<view class="kind-list">
<block wx:for-items="{{coursesSet5}}" wx:key="{{item.id}}">
<view class="kind-list-item">
<view id="{{item.courseNo}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="noteGraph" data-evaluation="{{item.evaluation}}">
<view class="kind-list-text">
<text class="class-list-item-title">{{item.courseName}}</text>
<text class="class-list-item-content">n{{item.courseDesc}}</text>
</view>
<view class="evaluation-text">综合评价</view>
<image class="kind-list-img" src="../resources/kind/logo.png"></image>
</view>
<view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
<view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
<block wx:for-items="{{item.evaluation}}" wx:for-item="eva" wx:key="*item">
<navigator url=".." class="navigator">
<view class="navigator-text">{{eva}}</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
|
@import "../common/index.wxss";
@import "../common/lib/weui.wxss";
/* voteTabs */
.class-list {
margin-top: 8px;
}
/* class list */
.class-list-item-title {
font-family: SimHei;
font-size: 32rpx;
}
.class-list-item-content {
font-family: SimHei;
font-size: 28rpx;
color: #757373;
}
.evaluation-text {
font-size: 12px;
}
.kind-list-img {
margin-left: 5px;
width: 14px;
height: 14px;
}
|
var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
Page({
// data
data: {
// tabs
voteTabs: ["综合", "纯干货", "给分高", "实践性强", "签到少"],
activeIndex: 0,
sliderOffset: 0,
sliderLeft: 0,
// coursesSet
coursesSet1: [
{
"courseNo" : "001",
"courseName" : "用户体验设计/陈妍",
"courseDesc" : "腾讯传奇部门CDC倾情传授",
"courseType" : "艺术课",
"courseScore" : "9.5",
"evaluation" : [
{
name : "纯干货",
data : 90,
},
{
name : "给分高",
data : 95,
},
{
name : "实践性",
data : 100,
},
{
name : "签到少",
data : 666,
}
]
}
],
coursesSet2: [
{
"courseNo" : "001",
"courseName" : "用户体验设计/陈妍",
"courseDesc" : "腾讯传奇部门CDC倾情传授",
"courseType" : "艺术课",
"courseScore" : "9.5",
"evaluation" : [
{
name : "纯干货",
data : 90,
},
{
name : "给分高",
data : 95,
},
{
name : "实践性",
data : 100,
},
{
name : "签到少",
data : 666,
}
]
}, {
"courseNo" : "002",
"courseName" : "动漫欣赏与实践/王伟",
"courseDesc" : "教你学会动漫欣赏",
"courseType" : "艺术课",
"courseScore" : 9.4,
"evaluation" : [
{
name : "纯干货",
data : 85,
},
{
name : "给分高",
data : 45,
},
{
name : "实践性",
data : 35,
},
{
name : "签到少",
data : 85,
}
]
}
],
coursesSet3: [
{
"courseNo" : "001",
"courseName" : "用户体验设计/陈妍",
"courseDesc" : "腾讯传奇部门CDC倾情传授",
"courseType" : "艺术课",
"courseScore" : "9.5",
"evaluation" : [
{
name : "纯干货",
data : 90,
},
{
name : "给分高",
data : 95,
},
{
name : "实践性",
data : 100,
},
{
name : "签到少",
data : 666,
}
]
}, {
"courseNo" : "002",
"courseName" : "动漫欣赏与实践/王伟",
"courseDesc" : "教你学会动漫欣赏",
"courseType" : "艺术课",
"courseScore" : 9.4,
"evaluation" : [
{
name : "纯干货",
data : 85,
},
{
name : "给分高",
data : 45,
},
{
name : "实践性",
data : 35,
},
{
name : "签到少",
data : 85,
}
]
},{
"courseNo" : "003",
"courseName" : "计算机动画/许捷",
"courseDesc" : "教你学会计算机动画",
"courseType" : "艺术课",
"courseScore" : "9.4",
"evaluation" : [
{
name : "纯干货",
data : 75,
},
{
name : "给分高",
data : 55,
},
{
name : "实践性",
data : 25,
},
{
name : "签到少",
data : 95,
}
]
}
],
coursesSet4: [
{
"courseNo" : "001",
"courseName" : "用户体验设计/陈妍",
"courseDesc" : "腾讯传奇部门CDC倾情传授",
"courseType" : "艺术课",
"courseScore" : "9.5",
"evaluation" : [
{
name : "纯干货",
data : 90,
},
{
name : "给分高",
data : 95,
},
{
name : "实践性",
data : 100,
},
{
name : "签到少",
data : 666,
}
]
}, {
"courseNo" : "002",
"courseName" : "动漫欣赏与实践/王伟",
"courseDesc" : "教你学会动漫欣赏",
"courseType" : "艺术课",
"courseScore" : 9.4,
"evaluation" : [
{
name : "纯干货",
data : 85,
},
{
name : "给分高",
data : 45,
},
{
name : "实践性",
data : 35,
},
{
name : "签到少",
data : 85,
}
]
},{
"courseNo" : "003",
"courseName" : "计算机动画/许捷",
"courseDesc" : "教你学会计算机动画",
"courseType" : "艺术课",
"courseScore" : "9.4",
"evaluation" : [
{
name : "纯干货",
data : 75,
},
{
name : "给分高",
data : 55,
},
{
name : "实践性",
data : 25,
},
{
name : "签到少",
data : 95,
}
]
},{
"courseNo" : "004",
"courseName" : "国画技法/李维红",
"courseDesc" : "教你学会国画技法",
"courseType" : "艺术课",
"courseScore" : "9.4",
"evaluation" : [
{
name : "纯干货",
data : 95,
},
{
name : "给分高",
data : 95,
},
{
name : "实践性",
data : 95,
},
{
name : "签到少",
data : 95,
}
]
},{
"courseNo" : "005",
"courseName" : "导演制作/王强",
"courseDesc" : "教你学会导演制作",
"courseType" : "艺术课",
"courseScore" : "9.4",
"evaluation" : [
{
name : "纯干货",
data : 95,
},
{
name : "给分高",
data : 95,
},
{
name : "实践性",
data : 95,
},
{
name : "签到少",
data : 95,
}
]
}
],
coursesSet5: [
{
"courseNo" : "001",
"courseName" : "用户体验设计/陈妍",
"courseDesc" : "腾讯传奇部门CDC倾情传授",
"courseType" : "艺术课",
"courseScore" : "9.5",
"evaluation" : [
{
name : "纯干货",
data : 90,
},
{
name : "给分高",
data : 95,
},
{
name : "实践性",
data : 100,
},
{
name : "签到少",
data : 666,
}
]
}, {
"courseNo" : "002",
"courseName" : "动漫欣赏与实践/王伟",
"courseDesc" : "教你学会动漫欣赏",
"courseType" : "艺术课",
"courseScore" : 9.4,
"evaluation" : [
{
name : "纯干货",
data : 85,
},
{
name : "给分高",
data : 45,
},
{
name : "实践性",
data : 35,
},
{
name : "签到少",
data : 85,
}
]
},{
"courseNo" : "003",
"courseName" : "计算机动画/许捷",
"courseDesc" : "教你学会计算机动画",
"courseType" : "艺术课",
"courseScore" : "9.4",
"evaluation" : [
{
name : "纯干货",
data : 75,
},
{
name : "给分高",
data : 55,
},
{
name : "实践性",
data : 25,
},
{
name : "签到少",
data : 95,
}
]
},{
"courseNo" : "004",
"courseName" : "国画技法/李维红",
"courseDesc" : "教你学会国画技法",
"courseType" : "艺术课",
"courseScore" : "9.4",
"evaluation" : [
{
name : "纯干货",
data : 95,
},
{
name : "给分高",
data : 95,
},
{
name : "实践性",
data : 95,
},
{
name : "签到少",
data : 95,
}
]
},{
"courseNo" : "005",
"courseName" : "导演制作/王强",
"courseDesc" : "教你学会导演制作",
"courseType" : "艺术课",
"courseScore" : "9.4",
"evaluation" : [
{
name : "纯干货",
data : 95,
},
{
name : "给分高",
data : 95,
},
{
name : "实践性",
data : 95,
},
{
name : "签到少",
data : 95,
}
]
},{
"courseNo" : "006",
"courseName" : "场景设计/王伟",
"courseDesc" : "教你学会场景设计",
"courseType" : "艺术课",
"courseScore" : "9.3",
"evaluation" : [
{
name : "纯干货",
data : 45,
},
{
name : "给分高",
data : 35,
},
{
name : "实践性",
data : 25,
},
{
name : "签到少",
data : 15,
}
]
}
],
},
// voteTabs
onLoad: function () {
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
sliderLeft: (res.windowWidth / that.data.voteTabs.length - sliderWidth) / 2,
sliderOffset: res.windowWidth / that.data.voteTabs.length * that.data.activeIndex
});
}
});
},
tabClick: function (e) {
this.setData({
sliderOffset: e.currentTarget.offsetLeft,
activeIndex: e.currentTarget.id
});
},
// noteGraph
noteGraph: function(e) {
var evaluation = e.currentTarget.dataset.evaluation;
wx.navigateTo({
url: '../vote-graph/vote-graph?evaluation=' + JSON.stringify(evaluation)
});
}
});
|
模板简介：该模板名称为【微信小程序顶部简单纯文字导航列表样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
