<!-- index.wxml --> <!-- 搜索框 --> <view class="search marginTopBottom"> <view class="icon-search"></view> <input placeholder="搜索你想听的节目"></input> </view> <!-- 轮播图 --> <view class="swiper-container"> <swiper class="swiper" autoplay="true" circular="true" interval="3000" easing-function="easeOutCubic" current="{{swiperCurren}}" bindchange="swiperChange"> <!-- 轮播图图片 --> <swiper-item class="swiperItem" wx:for="{{imgList}}" wx:key> <!-- 加上widthFix可以使图片自适应 --> <image src="{{item}}" ></image> </swiper-item> </swiper> <!-- 为了和喜马拉雅一致,自己需定制轮播图dots --> <view class="dots"> <block wx:for="{{imgList.length}}" wx:key> <!-- 根据index判断是否选中 --> <view class="dotsItem{{index == swiperCurrent ? ' active' : ''}}"></view> </block> </view> </view> <!-- 宫格导航 --> <view class="nav"> <block> <!-- 因为每个宫格的导航都不一样所以没有使用循环 --> <view class="navItem" bindtap="goToBangDan"> <!-- 因为没有合适的图,所以全部使用的一样的 --> <image class="navIcon" src="/image/nav-icon/bangdan.png" mode="widthFix" lazy-load="false"></image> <text class="navText">榜单</text> </view> <view class="navItem" bindtap=""> <image class="navIcon" src="/image/nav-icon/bangdan.png" mode="widthFix" lazy-load="false"></image> <text class="navText">听小说</text> </view> <view class="navItem" bindtap=""> <image class="navIcon" src="/image/nav-icon/bangdan.png" mode="widthFix" lazy-load="false"></image> <text class="navText">情感电台</text> </view> <view class="navItem" bindtap=""> <image class="navIcon" src="/image/nav-icon/bangdan.png" mode="widthFix" lazy-load="false"></image> <text class="navText">听相声</text> </view> <view class="navItem" bindtap=""> <image class="navIcon" src="/image/nav-icon/bangdan.png" mode="widthFix" lazy-load="false"></image> <text class="navText">儿童故事</text> </view> </block> </view> <!-- 猜你喜欢 --> <view class="like"> <view class="barTitle"> <view class="Title-left">猜你喜欢</view> <view class="Title-right">查看全部></view> </view> <!-- 这没有没有使用数据绑定,因为是练手而且数据比较少 --> <view class="likeItemBox"> <view class="likeItem"> <view class="likeimg"> <image class="likeItemIcon" src="/image/guess1.jpg" mode="widthFix" lazy-load="false"></image> <view class="cover"> <!-- text用来显示icon 暂无 --> <text class=""></text> 4.6亿 </view> </view> <view class="likeText">米小圈上学记:一二三年级</view> </view> <view class="likeItem"> <view class="likeimg"> <image class="likeItemIcon" src="/image/guess2.jpg" mode="widthFix" lazy-load="false"></image> <view class="cover"> <text class=""></text> 4.6亿 </view> </view> <view class="likeText">段子来了</view> </view> <view class="likeItem"> <view class="likeimg"> <image class="likeItemIcon" src="/image/guess3.jpg" mode="widthFix" lazy-load="false"></image> <view class="cover"> <text class=""></text> 4.6亿 </view> </view> <view class="likeText">读者</view> </view> </view> </view> <!-- 有数据的时候显示 --> <block wx:if="{{showitem}}"> <!-- 有声小说 --> <view class="contentList"> <view class="barTitle"> <view class="Title-left">有声小说</view> <view class="Title-right">查看全部></view> </view> <block wx:for="{{xiaoshuocontent}}" wx:key> <view class="content"> <view class="contentImg"> <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image> </view> <view class="content-right"> <view class="title"> <view class="titleText">{{item.title}}</view> <view class="introduction">{{item.trackTitle}}</view> </view> <view class="count"> <text class="playcount"> <!-- <text class="icon-"></text> --> 126亿 </text> <text class="jicount">{{item.tracks}}集</text> </view> </view> </view> </block> </view> <!-- 相声评书 --> <view class="contentList"> <view class="barTitle"> <view class="Title-left">相声评书</view> <view class="Title-right">查看全部></view> </view> <block wx:for="{{xiangshengcontent}}" wx:key> <view class="content"> <view class="contentImg"> <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image> </view> <view class="content-right"> <view class="title"> <view class="titleText">{{item.title}}</view> <view class="introduction">{{item.trackTitle}}</view> </view> <view class="count"> <text class="playcount"> <!-- <text class="icon-"></text> --> 126亿 </text> <text class="jicount">{{item.tracks}}集</text> </view> </view> </view> </block> </view> <!-- 脱口秀 --> <view class="contentList"> <view class="barTitle"> <view class="Title-left">脱口秀</view> <view class="Title-right">查看全部></view> </view> <block wx:for="{{tuokocontent}}" wx:key> <view class="content"> <view class="contentImg"> <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image> </view> <view class="content-right"> <view class="title"> <view class="titleText">{{item.title}}</view> <view class="introduction">{{item.trackTitle}}</view> </view> <view class="count"> <text class="playcount"> <!-- <text class="icon-"></text> --> 126亿 </text> <text class="jicount">{{item.tracks}}集</text> </view> </view> </view> </block> </view> </block> <block wx:else> <view class="dataNotip"> <view class="tip"> 网络暂时走丢了,请稍后再试 </view> </view> </block>