云诺说 - 小程序开发 - 软件定制
当前位置: 微信小程序 > 基于微信小程序的二手商城设计与开发系列之商城首页

基于微信小程序的二手商城设计与开发系列之商城首页

2021-02-01 02:35 分类:微信小程序 作者:云诺 阅读(29)

版权声明:本文为博主原创文章,如果转载请给出原文链接: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}`
        })
    }})

代码量不多,逻辑清晰简单,最后看下界面的效果图

QQ截图20210201142755.jpg

哈哈,界面不算太漂亮,但是也算不上丑陋。如果在开发上有遇到问题和疑问的可以加我微信细聊(LGY178888),请备注来意噢!

 

祝生活愉快!

「创作不易,你的支持是本站持续更新最大的动力!」

赞(0) 打赏

谢谢你请我喝奶茶*^_^*

支付宝
微信
1

谢谢你请我喝奶茶*^_^*

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 基于微信小程序的二手商城设计与开发系列之商城首页

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、软件服务定制和生活记录的技术服务型学习博客网站。

微信 :LGY178888

职业 :小程序开发、软件定制

现居 :广东省-广州市-天河区

友情链接

欢迎与本博客交换友情链接,本博客对交换链接的网站没有要求。如果您是本博客的友情链接网站,在遇到网站运行问题时,可以随时联系,我们将免费提供技术类支持! 申请交换友链

站点统计

  • 文章总数:115 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:125 个
  • 评论总数:0 条
  • 访问总量: 139166次
  • 最近更新:2021年02月27日