在线电子书阅读微信小程序 毕业设计（4）图书详细页-图书目录

wxml代码

<!--pages/shu/mulu.wxml--> <view class="qukuai"> <view class="qukuai_zuo"></view> <view class="qukuai_zhong">正在阅读：</view> <view class="qukuai_you"> Html从入门到精通</view> </view> <!--顶部切换菜单--> <view class='swiper-tab'> <view class='swiper-tab-list {{currentTab==0 ? "xuanzhong" : ""}}' data-current='0' bindtap='swichNav'> 图书目录 </view> <view class='swiper-tab-list {{currentTab==1 ? "xuanzhong" : ""}}' data-current='1' bindtap='swichNav'> 图书简介 </view> </view> <swiper current='{{currentTab}}' class='swiper-box' duration='300' style='height:{{winHeight -120}}px' bindchange='huadong'> <swiper-item> <scroll-view scroll-y style='height:{{winHeight -120}}px'> <navigator class="zhang1" url="/pages/shu/xiangqing"> <view class="zhang1_zuo">第1章 HTML 入门</view> <view class="zhang1_you">阅读</view> </navigator> <navigator class="zhang2" url="/pages/shu/xiangqing"> <view class="zhang2_zuo">1.2 HTML文档和概念</view> <view class="zhang2_you">阅读</view> </navigator> <view class="zhang2"> <view class="zhang2_zuo">1.3 HTML简介</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">1.4 HTML编辑器</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang3"> <view class="zhang3_zuo">1.4.1 Notepad（记事本）如何建立一个Web页面</view> <view class="zhang3_you">阅读</view> </view> <view class="zhang3"> <view class="zhang3_zuo">1.4.2 Dreamweaver如何建立一个Web页面</view> <view class="zhang3_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">1.5 入门示例</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">1.6 HTML 元素入门要点</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">1.7 HTML属性入门要点</view> <view class="zhang2_you">阅读</view> </view> <view class="h15"></view> <view class="zhang1"> <view class="zhang1_zuo">第2章 HTML 基础标签</view> <view class="zhang1_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">2.1 HTML 标题 h1-h6 标签</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">2.2 HTML 水平线 hr 标签</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">2.3 HTML 注释标签和查看源代码</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">2.4 HTML 段落 p 标签</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">2.5 HTML 换行 br 标签</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">2.6 块级元素和行内元素</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">2.7 HTML 文本格式化</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang1"> <view class="zhang1_zuo">第3章 HTML 基础标签</view> <view class="zhang1_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">.1 HTML 标题 h1-h6 标签</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">3.2 HTML 水平线 hr 标签</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">3.3 HTML 注释标签和查看源代码</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">3.4 HTML 段落 p 标签</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">3.5 HTML 换行 br 标签</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">3.6 块级元素和行内元素</view> <view class="zhang2_you">阅读</view> </view> <view class="zhang2"> <view class="zhang2_zuo">2.7 HTML 文本格式化</view> <view class="zhang2_you">阅读</view> </view> </scroll-view> </swiper-item> <swiper-item> <scroll-view scroll-y style='height:{{winHeight -200}}px'> <view class="jianjie"> 图书简介信息 </view> </scroll-view> </swiper-item> </swiper> <view class="caidan"> <navigator class="caidan_shouye" url="/pages/index/index" open-type="switchTab"> <image class="caidan_shouye_tu" src="/img/sp01.png"></image> <view class="caidan_shouye_wenzi">首页</view> </navigator> <view class="caidan_shoucang"> <image class="caidan_shoucang_tu" src="/img/sp03.png"></image> <view class="caidan_shoucang_wenzi">收藏</view> </view> <view class="caidan_goumai">免费</view> </view>

wxss代码

/* pages/shu/mulu.wxss */ page{background-color: #f9f9f9;} .qukuai{display: flex;align-items:center;background-color: #f9f9f9; height: 35px;} .qukuai_zuo{margin: 5px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;} .qukuai_zhong{font-size: 16px; color: rgb(13, 163, 233);} .qukuai_you{font-size: 16px; color: gray;padding-right: 10px;font-weight: bold;} .swiper-tab { background-color: white; width: 100%; border-bottom: 1px solid gray; text-align: center; line-height: 30px; display: flex; } .swiper-tab-list { display: inline-block; width: 50%; color: gray; } .xuanzhong { color: tomato; background-color: #f3f3f3; } .caidan{ height: 45px;background-color: white; display: flex; position: fixed; bottom: 0; width: 100%; font-size: 15px; color: gray; text-align: center;border-top: 1px solid gainsboro; } .caidan_shouye{width: 25%; display: flex; flex-direction: column;justify-content: center; align-items: center;border-right: 1px solid gainsboro;} .caidan_shouye_tu{width: 20px;height: 20px;} .caidan_shouye_wenzi{} .caidan_shoucang{width: 25%;display: flex; flex-direction: column;justify-content: center; align-items: center;} .caidan_shoucang_tu{width: 16px;height: 16px;} .caidan_shoucang_wenzi{} .caidan_goumai{width: 50%;line-height: 45px; background-color: orangered; color: white;line-height: 45px; text-align: center;} .h15{height: 15px;} .zhang1{display: flex; font-size: 16px;padding: 5px;background-color: white;} .zhang1_zuo{flex-grow: 1; padding-right: 10px;} .zhang1_you{} .zhang2{display: flex; font-size: 15px; padding: 10px 5px;color: gray;background-color: white;} .zhang2_zuo{flex-grow: 1; padding-right: 10px;} .zhang2_you{} .zhang3{display: flex; font-size: 15px; padding: 10px 5px;color: gray;background-color: white;} .zhang3_zuo{flex-grow: 1; padding-right: 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; text-indent: 1em;} .zhang3_you{width: 2.5em;text-align: right;} .jianjie{ padding: 10px;}