原创 基于微信小程序毕业设计题目选题课题 图书馆图书借阅小程序的设计与实现4借书功能

分类：Flex作者：佚名

该页面介绍图书内容、评价、提供借阅功能

效果图

在这里插入图片描述

wxml代码

<import src="/wxParse/wxParse.wxml" /> 
 
<!--顶部切换菜单-->
<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 class='swiper-tab-list {{currentTab==2 ? "xuanzhong" : ""}}' data-current='2' bindtap='swichNav'>
    评论
  </view>
</view>
<swiper current='{{currentTab}}' class='swiper-box' duration='300' style='height:{{winHeight -50}}px' bindchange='huadong'>

  <swiper-item>
    <scroll-view scroll-y style='height:{{winHeight-80}}px'>
      <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='height:250px;'>
        <block wx:for="{{images}}"  wx:key="key" wx:key="item.id">
          <swiper-item>
            <image src="{{item}}" class="slide-image2" />
          </swiper-item>
        </block>
      </swiper>

      <view class='biaoti'>
        <view class='biaoti01'>{{cp_mingcheng}}</view>
        <!-- <view class='biaoti02'>¥ {{jiage}}</view> -->
        <view class='biaoti02'>每本书借阅最长时间：90天 | 丢失原价赔偿</view>
        <view class='biaoti03'>简介：{{cp_jianjie}}</view>
      </view>
      <view class='huise'></view>

      <view class='huiyuan'>
        <view class='huiyuan-dengji bg_hui'>
        图书原价 
        </view>
        <view class='huiyuan-jiage '> ¥ {{jiage}}</view>
      </view>
      <view class='huise'></view>
<!-- 
      <view class='huiyuan'  wx:if="{{str_huiyuan_jiage>0}}">
        <view class='huiyuan-dengji  bg_hong'>
        {{str_huiyuan_leixing}}会员 
        </view>
        <view class='huiyuan-jiage'> ¥ {{str_huiyuan_jiage}}</view>
      </view>      
      <view class='huise'></view> -->

      <view class='xiaoshou'>
        <view>馆藏：{{cp_kucun}}本 | 剩余： {{kucun_shengyu}}本  | 出借：{{cp_yixiaoshou}}次</view>
        <view></view>
      </view>

    </scroll-view>
  </swiper-item>

  <swiper-item>
    <scroll-view scroll-y style='height:{{winHeight-80}}px'>
      <view>{{sp_neirong}}</view>

      <template is="wxParse" data="{{wxParseData:article.nodes}}" style="width:100%;" />

    </scroll-view>
  </swiper-item>

  <swiper-item style="background-color: #f2f2f2;">
  
    <form bindsubmit='pinglun' >
    <view class='pinglun' wx:if="{{false}}">

      <block wx:for="{{stars}}" wx:key="*this">
        <image class="star-image" style="left: {{item*50}}px" src="{{key >= item ? selectedSrc  : normalSrc}}" data-key="{{item}}" bindtap="select00" wx:key="*this"></image>
      </block>

      <view class='pinglun-biaoti'>评价（请打分）</view>
      <view class='pinglun-neirong'>
        <textarea placeholder='请输入评论，500字以内' name="neirong" auto-height></textarea>
      </view>
      <button class='pinglun-tijiao' form-type='submit'>提交评论</button>

    </view>
    </form>

   <block wx:for="{{pl}}"  wx:key="key">
    <view class='pl'>
      <view class='pl-yonghu'>
        <view class='pl-nicheng'>{{item.user_name}}</view>
        <view class='pl-shijian'>{{item.add_date}}</view>
      </view>
      <view class='pl-xx'>
        <!--image src='/images/selected.png' class='pl-img'></image-->

        <image wx:for="iiiii++" wx:for-item="i" wx:for-index="iiiii" wx:if="{{iiiii<item.xx}}" src='/images/selected.png' class='pl-img'></image>
        <!--设置wx:for-item="i" wx:for-index="iiiii" 为了防止和父类循环冲突-->
        ({{item.xx}}星)
      </view>
      <view class='pl-neirong'>{{item.pinlun_neirong}}</view>
    </view>
   </block>

  </swiper-item>

</swiper>


<!--底部菜单-->
<view class='dibu'>
  <view class='navs'>
    <view class='nav-item' style='width:12%;' bindtap='toShouye' >
      <image src="/img/sp01.png" class="nav-img"  />
      <text>首页</text>
    </view>
    <view class='nav-item' style='width:13%;'  bindtap='shoucang' >
      <image src="/img/sp02.png" class="nav-img" />
      <text>收藏</text>
    </view>
    <view class='nav-item' style='width:15%;'  bindtap='toGowuche' >
      <image src="/img/sp03.png" class="nav-img"/>
      <text>去借阅</text>
    </view>
    <view class='nav-item' style='width:33%;'>
      <button class='bt01' bindtap='jiaGwc'>加入借书清单</button>
    </view>
    <view class='nav-item' bindtap='goumai' style='width:27%;'>
      <button class='bt02'>立即借阅</button>
    </view>
  </view>
</view>

wxss代码

@import "/wxParse/wxParse.wxss";
 
.swiper-tab {
  width: 100%;
  border-bottom: 1px solid gray;
  text-align: center;
  line-height: 31px;
  display: flex;
}

.swiper-tab-list {
  display: inline-block;
  width: 33%;
  color: gray;
}

.xuanzhong {
  color: tomato;
  border-bottom: 3px solid tomato;
}

.swiper-box {
  width: 100%;
  height: 100%;
  display: block;
  overflow: scroll;
}

.slide-image2 {
  height: 100%;
  width: 100%;
  display: inline-block;
  overflow: hidden;
}

.biaoti {
  padding: 10px;
}

.biaoti01 {
  font-size: 16px;
}

.biaoti02 {
  color: red;
  font-size: 12px;
}

.biaoti03 {
  color: gray;
  font-size: 13px;
}

.huise {
  background-color: #eee;
  min-height: 5px;
}

.huiyuan {
  padding: 5px;
  display: flex;
}

.huiyuan-dengji {
  width: 30%;
  color: white;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  padding: 5px;
}
.bg_hong{  background-color: orangered;}
.bg_hui{ background-color: rgb(189, 189, 189);}

.huiyuan-jiage {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.xiaoshou {
  padding: 10px;
}

/*底部菜单*/

.dibu {
  position: fixed;
  bottom: 0px;
  height: 44px;
  width: 100%;
  line-height: 44px;
  color: gray;
  border-top: 1px solid #ddd;
  background-color: white;
  font-size: 16px;
  text-align: center;
}

.navs {
  display: flex;
}

.nav-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0px;
}

.nav-item text {
  font-size: 12px;
  margin-top: -15px;
  text-align: center;
}

.nav-img {
  width: 22px;
  height: 22px;
  align-self: center;
  margin-top: 3px;
}

.bt01 {
  width: 100%;
  background-color: darkorange;
  color: white;
  font-size: 15px;
  border-radius: 0;
  height: 44px;
  line-height: 44px;
}

.bt02 {
  width: 100%;
  background-color: tomato;
  color: white;
  font-size: 15px;
  border-radius: 0;
  height: 44px;
  line-height: 44px;
  padding: 0;
  margin: 0;
}

/*评论*/
.pinglun{
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
   font-size: 14px;
}
.pinglun-biaoti{
  line-height: 30px;
  padding: 5px;
  background-color: #f9f9f9;
}
.pinglun-neirong{
  background-color: white;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  padding: 5px;
  margin-top: 50px;
  height: 50px;
}
.pinglun-tijiao{
  background-color: orange;
  color: white;
  width: 90%;
  margin-top: 10px;
}

/*五星打分*/
.star-image{
  position: absolute;
  top: 39px;
  width: 50px;
  height: 50px;
  src: "/images/normal.png"
}
/*评论内容*/
.pl{
   border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin-top: 10px;
  background-color: white;
}
.pl-yonghu{
  display: flex;
  border-bottom: 1px dotted gainsboro;
  padding-bottom: 5px;
  }
.pl-nicheng{
  flex-grow: 1;
  font-size: 14px;
}
.pl-shijian{
  font-size: 12px;
  color: gray;
}
.pl-xx{}
.pl-img{
  width: 15px; height: 15px;
}
.pl-neirong{
  color: gray;
  font-size: 12px;
}

原文地址：https://blog.csdn.net/u013818205/article/details/114689819

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等PC端与移动端的区别第一：PC考虑的是浏览器的兼容性，移动端考
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。阮一峰：CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况下主
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做？解决方法:简短的
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料，有两种方法可以实现效果：**1.
AS3无法从Java发送的套接字解​​码AMF3对象
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下：Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
java – 在JBoss上使用Flex / BlazeDS的Client.Error.MessageSend问题
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
java – NetConnection.Call.Failed偶尔在Flex3 / Tomcat / BlazeDS / Spring中发生
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
HTML5的Day1
弹性和布局display:flex在ie6,ie7不兼容状态，一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列，只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX源码分析
FLEX2.0源码分析（一）https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二（网络监测swizzle）https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三（网络监测记录FLEXNetworkRecorder）https://www.jianshu.com/p/66267dc922c5FLEX源码分析四（Systemlog）https://www.jianshu.
页面伸缩布局实例
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
弹性盒子圣杯布局
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex与inline-flex
flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局，但是如果是flex，父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%，而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
css实现手机端导航栏左右滑动
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
php – 查找位于指定距离之间的用户(使用用户的邮政编码)
有没有办法使用邮政编码找到径向距离？我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot