微信小程序的两种选项卡方法以及滚动的方式
2019-01-10 本文已影响10人
加冰宝贝
<!--pages/lesson_detail/lesson_detail.wxml-->
<view>
<!-- 课程视频内容 开始 -->
<view class="curriculum-video mui-clearfix">
<image src="http://bd.eacase.com/budongimg/class_02.png" alt=""> </image>
</view>
<!-- 课程视频内容 开始 -->
<!-- 课程详情 选项卡 开始-->
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">课程信息</view>
<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">课程目录</view>
<view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">教学歌谱</view>
<view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">学员评价</view>
</view>
<!-- 内容转换区 开始 -->
<view style='width:100%;height:100%;display:block;backrgound:!f1f1f1;'>
<!-- <swiper class='swiper-box' current="{{currentTab}}" duration="300" bindchange="swiperTab">
<swiper-item catchtouchmove="stopTouchMove"> -->
<!-- <scroll-view scroll-y="true" class='scroll-view'> -->
<view class='lesson_scroll_view{{currentTab == 0?" lesson_scroll_view":" none"}}'>
<!--钢琴快乐弹唱系列/限时特价最后一天 开始-->
<view class=" mui-clearfix curriculum-div">
<view class="curriculum-p">钢琴快乐弹唱系列/限时特价最后一天</view>
<view class="curriculum-small" style=' display: flex;justify-content: flex-star; align-items: center;'>
<view style="font-size:30rpx;line-height:26rpx;padding-right:10rpx;margin-right:10rpx;border-right:1px solid #999999;">钢琴</view>
课程推荐
</view>
<view class="curriculum-div-view mui-clearfix">
<view class='view-left'>
<view class="curriculum-red">¥59.9/节 </view>
<view class="curriculum-text">（共10节）</view>
</view>
<view class='view-right'>
<image src="http://bd.eacase.com/budongimg/xiaohuomiao_03.png" class="curriculum-xiao"></image>
<view class="curriculum-text">已售12586节</view>
</view>
</view>
</view>
<!--钢琴快乐弹唱系列/限时特价最后一天 结束-->
<!-- 授课老师 开始 -->
<view class="curriculum-div1 mui-clearfix ">
<view class="curriculum-p">授课老师</view>
<!-- 点击 回跳到老师主页 -->
<view class='views' bindtap='teacherTap'>
<image class="curriculum-media-img" src="http://bd.eacase.com/budongimg/class_05.png "></image>
<view class="curriculum-media">
<view class="curriculum-media-view">
<view class="curriculum-lan">蓝调小生</view>
<image src='http://bd.eacase.com/budongimg/zuanshi_03.png'></image>
<image src='http://bd.eacase.com/budongimg/zuanshi_03.png'></image>
<image src='http://bd.eacase.com/budongimg/zuanshi_03.png'></image>
<image src='http://bd.eacase.com/budongimg/zuanshi_03.png'></image>
</view>
<view class="curriculum-words">累计1280课时 5万评价 5800赞</view>
<view class="curriculum-media-view">
<view class="curriculum-bgs">专业</view>
<view class="curriculum-bgs">通俗易懂</view>
<view class="curriculum-bgs">幽默</view>
<view class="curriculum-bgs">超级帅</view>
</view>
</view>
<image src='http://bd.eacase.com/budongimg/fl_youjian.png' class="curriculum-navigate "></image>
</view>
</view>
<!-- 授课老师 结束 -->
<!--课程详情 开始 -->
<view class=" mui-clearfix curriculum-div1" style="margin-bottom:0rpx;">
<view class="curriculum-p">课程详情</view>
<view class="curriculum-small-title">适合人群 </view>
<view class="curriculum-samll-words">5岁以上的学琴者</view>
<view class="curriculum-small-title">教学说明 </view>
<view class="curriculum-samll-words">蓝调小生讲课生动活泼，幽默风趣，表达清晰，通俗易懂，在这个系列 课程里蓝调小生将系统的和你分享钢琴弹唱的很多秘诀，帮助你提升钢 琴弹唱，即兴伴奏的技能。</view>
<view class="curriculum-small-title"> 教学课件(笔记/歌谱)</view>
<image src="http://bd.eacase.com/budongimg/music_02.png" class="curriculum-music"></image>
</view>
<!--课程详情 结束 -->
</view>
<!-- </swiper-item>
<swiper-item catchtouchmove="stopTouchMove"> -->
<view class='lesson_scroll_view{{currentTab == 1?" lesson_scroll_view":" none"}}'>
<!-- 课程目录 内容开始 -->
<view class="curriculum-p2 mui-clearfix">
<image src="http://bd.eacase.com/budongimg/class-mu_03.png" alt="" class="curriculum-p-img"></image>
<text class="curriculum-p2-span">钢琴快乐弹唱系列(共7节课)</text>
</view>
<!-- 课程目录 是可以点击的 点击以后跳转到该课程页面 -->
<view class="curriculum-p3 mui-clearfix">
<image src="http://bd.eacase.com/budongimg/class-mu_06.png" alt="" class="curriculum-p3-img "></image>
<text class="curriculum-p3-span mui-ellipsis">1. 钢琴课程学习指南 </text>
<text class="curriculum-p3-listen">（试听）</text>
<text class="curriculum-p3-times"> 02:45 </text>
</view>
<!-- 课程目录 内容结束 -->
</view>
<!-- </swiper-item>
<swiper-item catchtouchmove="stopTouchMove"> -->
<view class='lesson_scroll_view{{currentTab == 2?" lesson_scroll_view":" none"}}'>
<!-- 学员评价 内容开始 -->
<view class=" mui-clearfix curriculum-div2">
<image class="curriculum-media-img" src="http://bd.eacase.com/budongimg/class_09.png"></image>
<view class="curriculum-media">
<view class="mui-clearfix curriculum-top ">
<text class="curriculum-p4">风中百合</text>
<text class="curriculum-top-word">2018-09-14</text>
</view>
<view class="mui-ellipsis-2 curriculum-top-word" style='line-height:40rpx;'>
老师的课程太好！简单易懂，让我一下子对练琴充满了乐趣 和希望 ~ 感谢老师！
</view>
</view>
</view>
<!-- 查看更多可点击 -->
<button style="border:none;" type="default" size="default" loading="{{loading}}" plain="{{}}" disabled="{{disabled}}" bindtap="setLoading" class='button-hover' data-loading="{{loading}}"> 查看更多课程 </button>
<!-- 学员评价 内容结束 -->
</view>
<!-- </swiper-item>
<swiper-item catchtouchmove="stopTouchMove"> -->
<view class='lesson_scroll_view{{currentTab == 3?" lesson_scroll_view":" none"}}'>
<view class=" mui-clearfix curriculum-div3">
<!-- 各个课程可点击 点击跳到各个课程 -->
<view class="curriculum-grid-img">
<image src="http://bd.eacase.com/budongimg/index_42.png" alt=""></image>
<view class="curriculum-grid-word">
<view class="mui-ellipsis curriculum-small-margin">
钢琴快乐弹唱系列/限时特价
</view>
<view class="curriculum-words-zan" style='padding:7rpx 0rpx 6rpx 0rpx!important;'>1000评论 58赞 已售200</view>
<view class="curriculum-red-price ">¥59.9/节 </view>
</view>
</view>
</view>
</view>
<!-- </swiper-item>
</swiper> -->
</view>
<!-- 内容转换区 结束 -->
<!-- 课程详情 选项卡 结束-->
<!-- 底部导航 开始 -->
js
