原创基于微信小程序毕业设计题目选题课题图书馆图书借阅小程序的设计与实现（1）首页

首页主要显示：轮播图、菜单、最新资讯、最新上架的图书

效果图

wxml代码

<!--轮播：远程数据（图片地址+连接地址）【对象数组，数组中的每个元素包含图片地址+链接地址】-->
<view ><!--swiper属性里面的设置相比上面，多了个if判断是否显示，jieguo=true; jieguo2=false-->
<!--远程数据地址：http://phpshop.yaoyiwangluo.com/wx_lunbo.php-->
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" > <block wx:for="{{images2}}" wx:key="a002" style='height:120px;'><!--给每个swiper-item外围添加了链接--><navigator url='{{item.dizhi}}'><swiper-item><image src="{{item.tupian}}" class="slide-image2" /></swiper-item></navigator></block>
</swiper>
</view><!--快捷菜单-->
<view class='menu'><navigator url='/pages/gongyong/chanpin_list' class='menu-item'><image src='/img/menu01.png' mode='widthFix' class='menu-img'></image><text class='menu-mc'>所有图书</text></navigator><navigator url='/pages/fenlei/index'  open-type="switchTab" class='menu-item'><image src='/img/menu02.png' mode='widthFix' class='menu-img'></image><text class='menu-mc'>图书分类</text></navigator><!--navigator的open-type属性 可选值 'navigate'、'redirect'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能open-type="navigate"等价于API的　wx.navigateTo　而wx.navigateTo的url是需要跳转的应用内非 tabBar 的页面的路径open-type="redirect"等价于API的　wx.redirectTo　而wx.redirectTo的url是需要跳转的应用内非 tabBar 的页面的路径open-type="switchTab"等价于API的　wx.switchTab而wx.switchTab的url是需要跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面最后一个switchTab事件触发以后　把前面的页面都关闭了  --><!--原理：判断用户是否登录，登录则链接到用户中心的首页；没有登录则链接到用户登录页面（tabBar页面）逻辑：user_id（用户登录的数字id）初始为0；读取缓存中的u_id的值；如果有则赋值给user_id（大于0的数字）--><navigator wx:if="{{user_id > 0}}" url='/pages/huiyuan/index2' class='menu-item'><image src='/img/menu03.png' mode='widthFix' class='menu-img'></image><text class='menu-mc'>用户中心</text></navigator><!--会员登录页面/pages/huiyuan/index是tabBar页面，所以需要添加 open-type="switchTab"--><navigator  wx:else url='/pages/huiyuan/index' open-type="switchTab" class='menu-item'><image src='/img/menu03.png' mode='widthFix' class='menu-img'></image><text class='menu-mc'>用户中心</text></navigator><!--订单列表的链接 处理同上 用户中心--><navigator wx:if="{{user_id > 0}}" url='/pages/huiyuan/dingdan/dingdan_list' class='menu-item'><image src='/img/menu04.png' mode='widthFix' class='menu-img'></image><text class='menu-mc'>我的借阅</text></navigator><navigator  wx:else url='/pages/huiyuan/index' open-type="switchTab" class='menu-item'><image src='/img/menu04.png' mode='widthFix' class='menu-img'></image><text class='menu-mc'>我的借阅</text></navigator><navigator url='/pages/guanyu/fangkui' class='menu-item'><image src='/img/menu05.png' mode='widthFix' class='menu-img'></image><text class='menu-mc'>留言反馈</text></navigator><!---php版本下面id对应为 236，237，236--><navigator url='/pages/gongyong/xinxi_list?cs_lxid=236&mc=帮助中心' class='menu-item'><image src='/img/menu06.png' mode='widthFix' class='menu-img'></image><text class='menu-mc'>帮助中心</text></navigator><navigator url='/pages/gongyong/xinxi_list?cs_lxid=237&mc=平台介绍' class='menu-item'><image src='/img/menu07.png' mode='widthFix' class='menu-img'></image><text class='menu-mc'>平台介绍</text></navigator><navigator url='/pages/gongyong/xinxi_list?cs_lxid=241&mc=活动列表' class='menu-item'><image src='/img/menu08.png' mode='widthFix' class='menu-img'></image><text class='menu-mc'>最新公告</text></navigator></view> <!--获取web网站后台发布的最新3条信息-->
<!--远程地址：http://phpshop.yaoyiwangluo.com/wx_news_list.php 【对象数组】-->
<block wx:for="{{xinxis}}" wx:key="myid"><navigator url='/pages/gongyong/xinxi_info?cs_xxid={{item.myid}}' class='xinxi'><image class='xinxi-icon' src='/img/news.png'></image><text class='xinxi-text'>{{item.myshijian}} {{item.mybiaoti}}</text><image class='xinxi-arrow' src='/img/right.png'></image></navigator>
</block><!--区块标题-最新上架产品; 更多链接到所有产品页面-->
<view class='qukuai'><view class='y01'></view><text class='t01'>最新上架图书</text><navigator url="/pages/gongyong/chanpin_list"  class='m01'>更多></navigator>
</view><!--最新上架商品-->
<view class='zuixin'><!--远程数据（对象数组）：http://www.yaoyiwangluo.com/wx_CpList_top4.asp--><!--获取的远程数据赋值给数组变量：zuixins；然后循环显示该数组的内容--><block wx:for="{{zuixins}}" wx:key="cp_id"><!--每个产品会链接到详细页面，需要的参数：产品id+产品名称--><navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='zuixin-item'><image src='{{item.cp_tupian}}' mode='widthFix' class='zuixin-img'></image><text class='zuixin-mc'>{{item.cp_mingcheng}}</text><view><text class='zuixin-jiage0'>价格：¥</text><text class='zuixin-jiage1'>{{item.jiage}}</text><text class='zuixin-jiage2'></text></view></navigator></block>
</view><!--销售排行-标题区块-->
<view class='qukuai'><view class='y01'></view><text class='t01'>图书借阅榜</text><navigator url="/pages/gongyong/chanpin_list"  class='m01'>更多></navigator>
</view>
<!--销售排行-商品列表-->
<block wx:for="{{tuijians}}" wx:key="cp_id">
<navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='paihang-item'><view class='paihang-tupian'><image class='paihang-img' src='{{item.cp_tupian}}' mode='widthFix'></image></view><view class='paihang-xinxi'><text class='paihang-mingcheng'>{{item.cp_mingcheng}}</text><text class='paihang-jianjie'>产品简介</text><view><text class='paihang-xuhao'>No.{{index+1}}</text><text class='paihang-xiaoshou'> | 456人付款 | </text><text class='paihang-jiage0'> ¥</text><text class='paihang-jiage1'> {{item.jiage}}</text></view></view>
</navigator>
</block>

wxss代码

/*广告图样式*/.ad01 {box-shadow: 0px 2px 2px gainsboro; /*阴影*/margin: 2px; /*外边距*/
}.ad01-img {width: 100%;
}/*轮播图样式*/
.slide-image {height: 120px;width: 100%;display: inline-block;overflow: hidden;
}.slide-image2 {height: 100%;width: 100%;display: inline-block;overflow: hidden;
}/*快捷菜单*/.menu {display: flex;flex-wrap: wrap; /*换行*/border-bottom: 1px solid gainsboro; /*菜单最下面线条*/
}.menu-item {width: 25%; /*1行4个菜单*/padding: 5px; /*内边距*/box-sizing: border-box;display: flex;justify-content: center; /*左右居中*/flex-direction: column; /*从上到下*/
}.menu-img {width: 66%;align-self: center;
}.menu-mc {font-size: 14px;align-self: center;
}.xinxi {display: flex;align-items: center;padding: 5px;border-bottom: 1px solid #f2f2f2;
}.xinxi-icon {width: 22px;height: 22px;
}.xinxi-text {flex-grow: 1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.xinxi-arrow {width: 13px;height: 13px;
}/*区块标题*/.qukuai {display: flex;background-color: aliceblue;align-items: center;
}.y01 {width: 3px;height: 18px;background-color: green;margin: 5px;box-shadow: 2px 2px 2px gainsboro;
}.t01 {color: gray;flex-grow: 1;text-shadow: 1px 1px 1px gainsboro;
}.m01 {color: gray;margin-right: 5px;text-shadow: 2px 2px 2px gainsboro;
}.zuixin {display: flex;flex-wrap: wrap;
}.zuixin-item {width: 50%;display: flex;flex-direction: column;padding: 5px;box-sizing: border-box;border-bottom: 1px dotted gainsboro;
}.zuixin-img {width: 100%;border: 1px solid #fcfafa;border-radius: 5px;box-shadow: 0px 2px 2px gainsboro;padding: 5px;box-sizing: border-box;
}.zuixin-mc {font-size: 12px;padding: 3px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}.zuixin-jiage0 {font-size: 10px;padding: 3px;color: red;
}.zuixin-jiage1 {font-size: 14px;padding: 3px;color: red;
}.zuixin-jiage2 {font-size: 11px;padding: 3px;color: gray;
}/*销售排行*/.paihang-item {display: flex;padding: 5px;width: 100%;
}.paihang-tupian {width: 25%;
}.paihang-img {width: 100%;border: 1px solid gainsboro;border-radius: 5px;box-shadow: 0px 2px 2px gainsboro;
}.paihang-xinxi {width: 75%;margin-left: 5px;margin-right: 10px;display: flex;flex-direction: column;
}.paihang-mingcheng {font-size: 13px;font-weight: bold;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.paihang-jianjie {font-size: 11px;color: gray;margin: 3px 0;
}.paihang-xuhao {color: green;font-size: 13px;
}.paihang-xiaoshou {font-size: 11px;color: gray;
}.paihang-jiage0 {font-size: 10px;color: red;
}.paihang-jiage1 {font-size: 13px;color: red;
}

原创基于微信小程序毕业设计题目选题课题图书馆图书借阅小程序的设计与实现（1）首页相关推荐

原创基于微信小程序毕业设计题目选题课题羽毛球篮球足球乒乓球场地球馆预约小程序的设计与实现（1）首页
首页主要是最新的资讯.场地球馆说明效果图 wxml页面 <view><image class="ad01" src="/img/1.png" ...
原创基于微信小程序毕业设计题目选题课题羽毛球篮球足球乒乓球场地球馆预约小程序的设计与实现（3）我的预约列表
我的预约列表,效果图 wxml代码  <view class="yuyue" wx:for ...
校园失物招领小程序开题报告和作品效果图（基于微信小程序毕业设计题目选题课题）
用户首次登陆系统需要注册一个用户或直接使用微信作为账号,用户在登录平台后,可以进行平台的操作.主要模块包括以下几点: (1)登录功能:注册普通账号登录:也可以直接使用微信登录:登录后可以修改用户的基本 ...
基于微信小程序的租车小程序毕业设计毕业论文开题报告和效果图（基于微信小程序毕业设计题目选题课题）
自习室图书馆座位预约小程序开题报告（基于微信小程序毕业设计题目选题课题）
开题报告效果图
校园、同城二手交易信息小程序毕业设计毕业论文开题报告和效果图参考（基于微信小程序毕业设计题目选题课题）
医院预约挂号小程序毕业设计毕业论文开题报告和效果图参考（基于微信小程序毕业设计题目选题课题）
基于微信运动场地预约小程序毕业设计毕业论文开题报告和效果图（基于微信小程序毕业设计题目选题课题）
房产中介预约看房小程序毕业设计毕业论文开题报告和效果图参考（基于微信小程序毕业设计题目选题课题）

原创基于微信小程序毕业设计题目选题课题图书馆图书借阅小程序的设计与实现（1）首页

效果图

wxml代码

wxss代码

原创基于微信小程序毕业设计题目选题课题图书馆图书借阅小程序的设计与实现（1）首页相关推荐

最新文章

热门文章

原创 基于微信小程序毕业设计题目选题课题 图书馆图书借阅小程序的设计与实现（1）首页

效果图

wxml代码

wxss代码

原创 基于微信小程序毕业设计题目选题课题 图书馆图书借阅小程序的设计与实现（1）首页相关推荐

最新文章

热门文章

原创基于微信小程序毕业设计题目选题课题图书馆图书借阅小程序的设计与实现（1）首页

原创基于微信小程序毕业设计题目选题课题图书馆图书借阅小程序的设计与实现（1）首页相关推荐