版权声明：本文为博主原创文章，如果转载请给出原文链接：http://doofuu.com/article/4156242.html
这是基于微信小程序的二手商城设计与开发系列文章，很早之前就在准备微信小程序的二手商城设计与开发系列课题了。可是一直在忙着开发二手商城小程序功能，系列博文一直拖着没写下，正好最近把功能都开发完有空余时间来写一写在设计与开发微信小程序的二手商城中遇到的问题，和开发中的一些经验，算是自己的一点总结。
二手商城系统一直是一个比较适合学习的小程序开发的主题，不算简单但是也没多大难度。
该微信小程序的二手商城设计的先对简洁一些，在首页分别有搜索框、轮播图、各类型的二手物品展示，在布局上采用了官方推荐的flex布局方式，简单简洁。
二手商城首页布局代码
<view>
<van-search
value="{{ searchKey }}"
input-align="center"
bind:search="toSearchList"
shape="round"
placeholder="请输入要搜索的商品"
/>
<swiper
class="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">
<van-tabs active="{{ active }}" bind:change="toClassifyList">
<block wx:for="{{classify_list}}">
<van-tab title="{{item}}">
<!-- 信息列表 -->
<view class="main-msg">
<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">
<image
wx: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>
</view>
</van-tab>
</block>
</van-tabs>
</view>
</view>数据处理逻辑代码
var config = require('../../config.js');
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
//首页轮播图
imgUrls: [
"../../images/icons/b1.jpg",
"../../images/icons/b2.jpg"
],
choose: 1,
goods_list: [],//所有商品列表
active: 0,//当前选择的tab
classify_list: config.classify_list,//所有类型
searchKey:''//查询词
},
//获取对应类型的商品
initList(type){
const that = this;
wx.showLoading({
title: '加载中'
})
//请求云函数查询对应类型的商品数据
wx.cloud.callFunction({
name: 'getGoods_list',
data: {
type
},
success: res => {
console.log(res);
wx.stopPullDownRefresh(); // 停止下拉刷新
wx.hideLoading();
let reverseList = res.result.list.data.reverse();
that.setData({
goods_list: reverseList
});
},
fail: err => {
wx.hideLoading();
console.log(err);
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
let type = this.data.classify_list[this.data.active];
//查询当前类型的数据
this.initList(type);
//清空搜索框内容
this.setData({
searchKey:''
})
},
tapToDetail(e){
const { id } = e.currentTarget.dataset;
wx.navigateTo({
url: `../goodsDetail/goodsDetail?id=${id}&status=1`
});
},
toClassifyList(e){
//选择的类型
let type = e.detail.title;
this.setData({
active: e.detail.index
})
this.initList(type);
},
toSearchList(e){
var searchKey = e.detail.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}`
})
}})代码量不多，逻辑清晰简单，最后看下界面的效果图
哈哈，界面不算太漂亮，但是也算不上丑陋。如果在开发上有遇到问题和疑问的可以加我微信细聊（LGY178888），请备注来意噢！
共有 0 条评论 - 基于微信小程序的二手商城设计与开发系列之商城首页