微信小程序图书交易商城云开发实例——书易（八）：二手书展示

二手图书交易需遵守诚信原则 #生活技巧# #节省生活成本# #生活节省# #二手图书交易#

微信小程序商城云开发实例——书易

总览博客地址：https://blog.csdn.net/qq_44827933/article/details/130672061
项目github地址：https://github.com/xsfmGenius/BookChange

头图

wxml

<!-- 头图 --> <view class="banner"> <image src='https://s1.imagehub.cc/images/2023/02/16/14f51eece966c39db6fd50e89ac53230.jpeg' style="width:100%;height:100%"></image> </view> 1234 wxss

.banner{ height:350rpx; } 123

现有图书

页面显示时（注意不是加载时，导航栏界面只加载一次）查询secondhand数据库中数据并倒序显示（越晚发布图书显示越靠前），点击图书传递参数_id跳转至对应二手书详情页。

wxml

<!-- 现有图书 --> <view class='oldbook-container'> <view class='oldbook-text'> <text class='oldbook-text'>-现有图书-</text> </view> <view class='oldbook-book'> <block wx:for="{{oldBook}}" wx:key="key"> <view class='oldbook-box' bindtap='gotoershouxiangqing' data-id="{{item._id}}"> <view class='oldbook-icon'> <image src='{{item.bookcover}}'></image> </view> <text class='oldbook-name'>{{item.bookname}}</text> <text class='oldbook-price'>￥{{item.bookprice}}</text> <view class='user'> <image src='{{item.userprofile}}'></image> <text>{{item.username}}</text> </view> </view> </block> </view> </view>

123456789101112131415161718192021 wxss

/* 新书上架 */ .oldbook-container{ border-radius:20rpx; margin-top:10rpx; /* height: 1000rpx; */ display: block; /* border-style:solid; */ /* border-color: #3bcab2; */ background-color: #f6f6f6; } .oldbook-text{ display:block; height:70rpx; background-color:#3bcab2; align-items: center; border-width:10rpx; } .oldbook-text text{ height:100%; width:100%; font-size: 40rpx; color: #fff; display: flex; align-items: center; justify-content: center; letter-spacing:20rpx; font-weight:bold; } .oldbook-book{ display: inline-block; flex-wrap: wrap; justify-content: center; align-items: center; justify-content: center; flex-direction: column; } .oldbook-box{ border-radius:20rpx; margin:10rpx; width:355rpx; height:600rpx; flex-direction: column; display: inline-flex; background-color: #fff; } .oldbook-icon image{ border-top-left-radius:20rpx; border-top-right-radius:20rpx; width: 355rpx; height: 420rpx; } .oldbook-name{ display:block; height:25rpx; font-size:28rpx; margin:10rpx 0 0 20rpx; } .oldbook-price{ display:block; margin-left:20rpx; margin-top:25rpx; font-size:40rpx; color:#3bcab2; } .user{ display:flex; height:40rpx; margin:10rpx 0 0 20rpx; /* background-color: #3bcab2; */ } .user image{ display:flex; height:40rpx; width:40rpx; border-radius: 50%; } .user text{ font-size:23rpx; color:#515151; line-height:50rpx; display:flex; margin-left:15rpx; }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 js

// 二手图书>界面跳转 gotoershouxiangqing(e){ // console.log(e.currentTarget.dataset.bookname) wx.navigateTo({ url: '/pages/ershouxiangqing/ershouxiangqing?id='+e.currentTarget.dataset.id, }) }, onShow: function () { db.collection('secondhand').get() .then(res => { this.setData({ oldBook:res.data.reverse() }) // console.log("输出",res.data) }) .catch(err => { console.log(err) }) },

1234567891011121314151617181920

发布

加号小图标固定在界面左下角，点击后跳转至二手书发布界面。

wxml

<!-- 发布 --> <view class="cart" bindtap="gotofabu"> <image src='../../image/add.png'></image> </view> 1234 wxss

/* 发布 */ .cart{ height:80rpx; width:80rpx; position:fixed; bottom:30rpx; left:30rpx; /* background-color: black; */ } .cart image{ width:100%; height:100%; } 12345678910111213 js

// 发布图书 gotofabu(e){ wx.navigateTo({ url: '/pages/fabu/fabu' }) }, 123456

网址：微信小程序图书交易商城云开发实例——书易（八）：二手书展示 https://www.yuejiaxmz.com/news/view/474610

相关内容

基于uniapp微信小程序的校园二手书交易系统
基于微信小程序二手书交易APP的设计与实现
二手图书交易小程序，如何变成“流动的图书馆”？
二手书交易小程序开发，提升书籍的变现效率！
基于微信小程序的校园二手图书交易小程序设计与实现(源码+lw+部署+讲解)
springboot基于微信小程序二手交易平台
云开发校园微社区兼职交友小程序源码+支持二手交易
十大二手书交易网站，丁书网上榜，第六是国家图书馆二期工程
基于微信小程序的校园二手图书设计与开发
二手图书交易平台论文

随便看看