在线电子书阅读微信小程序毕业设计（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;}

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

在线电子书阅读微信小程序毕业设计（3）图书列表
wxml代码  <view class="chaxun"><input class=" ...
在线电子书阅读微信小程序毕业设计（2）分类
wxml代码  <view class="chaxun"><input class=" ...
在线电子书阅读微信小程序毕业设计（1）首页
wxml代码 <view><image class="ad01 ...
在线电子书阅读微信小程序毕业设计（5）用户登录注册
wxml代码 <form ><view class='denlgu'><text class='shuoming'>请输入您的会员账号</text>&l ...
在线电子书阅读小程序,微信小程序电子书阅读,微信小程序小说阅读器毕业设计作品
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序在线电子书阅读系统,前台用户使用小程序,后台管理使用基Java+MySql技术:通过后台录入电子书信息.书目录信息,用户通过小程序 ...
原创基于微信小程序毕业设计题目选题课题图书馆图书借阅小程序的设计与实现（1）首页
首页主要显示:轮播图.菜单.最新资讯.最新上架的图书效果图 wxml代码  < ...
推荐几个【2021年原创】微信小程序毕业设计的课题小程序毕业设计题目小程序毕设选题参考基于微信小程序毕业设计
(1)电影院订票选座小程序毕业设计课程设计( 使用教程) https://ke.qq.com/course/3061789?taid=10201006892562461&tuin=2b10 ...
2022到2023基于PHP+微信小程序毕业设计课题参考
下面是收集整理的课题目录,这些课题都是已经做好的成品: 都配有了项目环境搭建视频,项目发布和操作视频,项目设计到的知识基础课毕业设计答辩一般是10分钟:前面5分钟演示作品,后面5分钟答辩:做毕设也要 ...
推荐几个微信小程序毕业设计的课题
(01)微信小程序商城 https://ke.qq.com/course/3419421 (02)电影院订票选座小程序 https://ke.qq.com/course/3418657 (03)餐厅酒 ...

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

wxml代码

wxss代码

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

最新文章

热门文章

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

wxml代码

wxss代码

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

最新文章

热门文章

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

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