基于毕设的微信小程序校园二手商城实现(一)

商城系统没花多少时间在UI美化上，主要实现了微信小程序校园二手商城的一些主要功能。界面是丑了点，但是在开发中学习到了很多的东西。还是非常值得的。
下面来看主界面的主要布局代码，主要知识点是html+css，如果懂html+css的话，布局什么的就很简单。
下面来看代码吧

<view><view class="search"><view class="ipt-box"><text class="iconfont icon-icon_search"></text><input class="search-ipt" value="{{searchKey}}" bindinput="saveSearchKey" maxlength="20" type="text" placeholder="请输入查询内容" /></view><button bindtap="toSearchList" class="search-btn">搜索</button></view><swiperclass="home-swiper"autoplay="true"interval="3000"duration="500"><block wx:for="{{imgUrls}}" wx:key="*this"><swiper-item><image src="{{item}}" class="slide-image"/></swiper-item></block></swiper><view class="main"><!-- 近期热门 --><view class="hot"><view class="h-tag"><view class="v-line"></view><text class="tit">热门分类</text></view><view class="classify"><view bindtap="toClassifyList" data-classify="{{item.txt}}" wx:for="{{classify_list}}" wx:key="{{item.txt}}" class="classify-item"><view class="img_box"><image src="{{item.icon}}" /></view><text class="txt">{{item.txt}}</text></view></view></view><!-- 信息列表 --><view class="main-msg"><!-- 导航条 --><view class="tab"><view bindtap="changeChoice" data-tag="1" class='{{choose ? "tab-item item-border" : "tab-item"}}'><text class='{{choose ? "tit-b" : "tit"}}'>二手市场</text></view><view bindtap="changeChoice" data-tag="0" class='{{choose ? "tab-item" : "tab-item item-border"}}'><text class='{{choose ? "tit" : "tit-b"}}'>失物招领</text></view></view><!-- 列表 --><view class="msg-list"><!-- 二手商品列表 --><view wx:if="{{choose == 1}}" bindtap="tapToDetail" data-id="{{item._id}}" class="msg-item" wx:key="{{item._id}}" wx:for="{{goods_list}}"><image src="{{item.userDetail.avatarUrl}}" class="userinfo-avatar mini-avatar"catchtap="tapToUserInfo"data-userid="{{item.openid}}"/><view class="item_right"><view class="nickName"><text>{{item.userDetail.nickName}}</text></view><view class="item_title"><text>{{item.title}}</text></view><view class="price"><text class="tag">￥</text><text>{{item.price}}</text></view><view class="pic_box"><imagewx:for="{{item.pic_url}}" wx:for-item="img"wx:for-index="idx" wx:key="{{index}}-{{idx}}" src="{{img}}"class="goods_pic"/></view><view class="txt_box"><view class="g_type"><text>#{{item.g_type}}</text><van-tag wx:if="{{item.isNew}}" plain type="success">全新宝贝</van-tag></view><text class="pub_time">{{item.pub_time}} | {{item.likeNum}}人喜欢</text></view></view></view><!-- 失物招领列表 --><view wx:if="{{choose == 0}}" bindtap="tapToLostDetail" data-id="{{item._id}}" class="msg-item" wx:key="{{item._id}}" wx:for="{{lost_list}}"><image src="{{item.userDetail.avatarUrl}}" class="userinfo-avatar mini-avatar"catchtap="tapToUserInfo"data-userid="{{item.openid}}"/><view class="item_right"><view class="nickName"><text>{{item.userDetail.nickName}}</text></view><view class="decrip"><view><imagesrc="{{item.pic_url[0]}}"class="goods_pic"/></view><view class="des_txt"><text class="title">{{item.title}}</text><text class="description">{{item.description}}</text></view></view><view class="t_box"><view class="g_type"><text>#{{item.type}}</text><van-tag wx:if="{{item.status == 1 && item.type_num == 1}}" color="#f2826a" plain>已返还</van-tag><van-tag wx:if="{{item.status == 1 && item.type_num == 0}}" color="#f2826a" plain>已寻回</van-tag>                                </view><text class="pub_time">{{item.pub_time}}</text></view></view></view><view class="footer" wx:if="{{lastData}}"><text>没有更多数据了哟~</text></view></view></view></view>
</view>

这里主要是处理逻辑，查询数据库数据，二手商品分类显示等逻辑代码

const app = getApp()Page({/*** 页面的初始数据*/data: {imgUrls: ['cloud://dev-513b66.6465-dev-513b66/Carousel/air.jpg','cloud://dev-513b66.6465-dev-513b66/Carousel/damen.jpg','cloud://dev-513b66.6465-dev-513b66/Carousel/timg.jpg','cloud://dev-513b66.6465-dev-513b66/Carousel/yishu.jpg'],hot_list: [],choose: 1,goods_list: [],lost_list: [],startNum: 0,lastData: false,lostStart: 0,lastLost: false,active: 0,classify_list: [{icon: '../../images/icons/digit.png',txt: '数码'}, {icon: '../../images/icons/book.png',txt: '书籍'}, {icon: '../../images/icons/soccer.png',txt: '运动'}, {icon: '../../images/icons/shirt.png',txt: '服饰'}],searchKey: ''},saveSearchKey(e){this.setData({searchKey: e.detail.value});},changeChoice(event) {const tag = parseInt(event.currentTarget.dataset.tag, 10);this.setData({choose: tag});},initList(startNum){const that = this;wx.showLoading({title: '加载中'})wx.cloud.callFunction({name: 'getGoods_list',data: {startNum},success: res => {console.log(res);wx.stopPullDownRefresh(); // 停止下拉刷新wx.hideLoading();const { isLast } = res.result;let reverseList = res.result.list.data.reverse();if(startNum){//startNum不为0时，拼接到goods_list的后面reverseList = that.data.goods_list.concat(reverseList);}that.setData({goods_list: reverseList,lastData: isLast});},fail: err => {wx.hideLoading();console.log(err);}})},initLostList(startNum){const that = this;wx.showLoading({title: '加载中'})wx.cloud.callFunction({name: 'getLost_list',data: {startNum},success: res => {console.log(res);wx.stopPullDownRefresh(); // 停止下拉刷新wx.hideLoading();const { isLast } = res.result;let reverseList = res.result.list.data.reverse();if(startNum){//startNum不为0时，拼接到goods_list的后面reverseList = that.data.lost_list.concat(reverseList);}that.setData({lost_list: reverseList,lastLost: isLast});},fail: err => {wx.hideLoading();console.log(err);}})},/*** 生命周期函数--监听页面显示*/onShow() {this.initList(0);this.initLostList(0);},/***上拉加载*/onReachBottom(){console.log('上拉加载')const { startNum, lastData, lostStart, lastLost, choose } = this.data;if(choose == 1 && !lastData){this.initList(startNum + 1);}else if(choose == 0 && !lastLost){this.initLostList(lostStart + 1)}},/***下拉刷新*/onPullDownRefresh(){const { choose } = this.data;if(choose == 1){this.initList(0);}else{this.initLostList(0);}},tapToDetail(e){const { id } = e.currentTarget.dataset;wx.navigateTo({url: `../goodsDetail/goodsDetail?id=${id}&status=1`});},tapToLostDetail(e){const { id } = e.currentTarget.dataset;wx.navigateTo({url: `../lostDetail/lostDetail?id=${id}`});},toClassifyList(e){const { classify } = e.currentTarget.dataset;wx.navigateTo({url: `../classifyList/classifyList?from=classify&txt=${classify}`})},toSearchList(){let { searchKey } = this.data;this.setData({searchKey: ''})searchKey = searchKey.replace(/\s*/g, '');if(searchKey){wx.navigateTo({url: `../classifyList/classifyList?from=search&txt=${searchKey}`})}},tapToUserInfo(e){const { userid } = e.currentTarget.dataset;wx.navigateTo({url: `../userCenter/userCenter?userId=${userid}`})}
})

代码逻辑不复杂，主要是学会小程序布局。下面是界面的截图

总结：学习html+css就能搞定小程序布局，多看看大佬的博客文章，多学习

基于毕设的微信小程序校园二手商城实现(一)相关推荐

基于Java+uniapp微信小程序的购物商城系统设计与实现
博主介绍:擅长Java.微信小程序.Python.Android等,专注于Java技术领域和毕业项目实战✌
基于微信小程序跳蚤市场-二手商城-计算机毕业设计
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,跳蚤市场小程序被用户普遍使用,为方便用户能够 ...
【毕业设计源码】基于微信小程序的特产商城系统设计与实现
目录一.程序介绍: 三.文档目录: 四.运行截图: 五.数据库表: 六.代码展示: 七.更多学习目录: 八.互动留言一.程序介绍: 文档:开发技术文档.参考LW.答辩PPT,部分项目另有其他文档 ...
java计算机毕业设计基于安卓Android/微信小程序的校园闲置二手交易平台APP
项目介绍网络技术的快速发展给各行各业带来了很大的突破,也给各行各业提供了一种新的管理模式,校园二手交易平台小程序将是又一个从传统管理到智能化信息管理的典型案例,对于传统的校园二手交易,所包括的信息内 ...
计算机毕业设计Python+uniapp基于微信小程序校园心理咨询(小程序+源码+LW)
计算机毕业设计Python+uniapp基于微信小程序校园心理咨询(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ ...
基于安卓/android/微信小程序的校园考研论坛app-#计算机毕业设计
项目介绍随着我国教育的发展,考研已经成为当前很多学子的不二选择.考研是一个让自己提升到更高平台的选择,所以很多学子在即将毕业之际都会选择考研.是很多学子又会面临着一个不知道如何去进行交流的问题.为了 ...
基于Python实现的微信小程序校园导航系统 | Python第一课环境篇 | Hellow World 程序 | 不同环境下搭建Python编程环境
一:Hellow World 程序 1.安装Python3 2.运行Python代码片段 Python自带了一个在终端窗口中运行的解释器,让你无需保存并运行整个程序就能尝试运行Python代码片段. ...
springboot 做表白墙_mango: 微信小程序|校园|表白墙|失物招领|二手交易|论坛|兼职|拼车|活动等...
Mango 微信小程序|校园|表白墙|失物招领|二手交易|论坛|兼职|拼车|活动等微信搜索(芒果New Life)即可查看效果没有上传在码云,GitHub直达-->点击跳转项目源码 2020 ...
基于SSM框架+微信小程序实现大学生二手闲置物品交易平台演示【附项目源码+论文说明】
基于SSM框架+微信小程序实现大学生二手闲置物品交易平台演示摘要而随着互联网技术的不断发展,互联网已经渗入到我们生活中的各个方面.移动设备的普及使我们的生活发生了翻天覆地的变化,这种变化也深刻影响 ...

基于毕设的微信小程序校园二手商城实现(一)

基于毕设的微信小程序校园二手商城实现(一)相关推荐

最新文章

热门文章