实现小程序商城首页【源码公开】

效果图

 

 页面源码

  
    
    
    
    
    
      
        
          
        
        
          
        
      
    
    
  
  
  
    
  
  
  
  
    
      
          
            
          
          
            {{item.goodsCaption}}
            {{item.goodsName}}
            ￥{{item.goodsPrice}}
          
      
    
  
  

样式设计

.index-container{
  background-color: #f1f1f1;
}
.header {
  background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
  width: 100%;
  height: 190px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}

/*轮播图*/
.swiper {
  padding: 8px;
}

.swiper-img {
  height: 140px;
}

/*商品展示*/
.goods-list {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}

.goods-item {
  width: 48%;
  padding: 5px;
  box-sizing: border-box;
  float: left;
  background: #fff;
  margin: 2px 1%;
}

.goods-item-image image {
  width: 100%;
}

.goods-item-caption {
  font-size: 11px;
  text-align: left;
  line-height: 1.05rem;
  text-overflow: ellipsis;
  font-family: -apple-system, Helvetica, sans-serif;
  color: #ffaa44;
  display: -webkit-box;
  word-break: break-all;
}

.goods-item-name {
  font-size: 14px;
  text-align: left;
  line-height: 1.05rem;
  height: 2.1rem;
  font-family: -apple-system, Helvetica, sans-serif;
  overflow: hidden;
  color: #434343;
  text-overflow: ellipsis;
  display: -webkit-box;
  word-break: break-all;
}

.goods-item-price {
  font-style: normal;
  font-family: JDZH-Regular, sans-serif;
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1.5rem;
  color: #ff4142;
}

.goods-item-price {
  font-size: 1rem;
}

逻辑编写

const {
  request
} = require("../../utils/request.js")

Page({
  data: {
    //导航静态数据
    navData: [{
        text: "榜单",
        icon: "http://jkw.life:8020/icon/榜单.png"
      },
      {
        text: "百亿补贴",
        icon: "http://jkw.life:8020/icon/百亿补贴.png",
        badge: "低价"
      },
      {
        text: "商品秒杀",
        icon: "http://jkw.life:8020/icon/商品秒杀.png",
        badge: "5:00"
      },
      {
        text: "新人红包",
        icon: "http://jkw.life:8020/icon/新人红包.png",
        badge: "￥99"
      },
      {
        text: "充值中心",
        icon: "http://jkw.life:8020/icon/充值中心.png",
        badge: "优惠"
      },
      {
        text: "新人福利",
        icon: "http://jkw.life:8020/icon/新人福利.png",
        badge: "福利"
      },
      {
        text: "包邮",
        icon: "http://jkw.life:8020/icon/包邮.png"
      },
      {
        text: "全部频道",
        icon: "http://jkw.life:8020/icon/全部频道.png"
      },
    ],
    //商品静态数据
    goodsList: [{
        goodsHeadImg: "../../images/goodsHeadImg/华为mate40头图.png",
        goodsName: "华为 Mate 40",
        goodsCaption: "官方旗舰正品准新手机全网通曲面屏",
        goodsPrice: "7999"
      },
      {
        goodsHeadImg: "../../images/goodsHeadImg/华为matepadair头图.png",
        goodsName: "华为matepadair",
        goodsCaption: "",
        goodsPrice: "3400"
      },
      {
        goodsHeadImg: "../../images/goodsHeadImg/iphone13pro头图.png",
        goodsName: "苹果 iPhone 13 Pro Max",
        goodsCaption: "双卡手机5G全网通正品苹果13ProMax",
        goodsPrice: "7369.00"
      },
    ],
    //商品动态数据-参数
    search: '',
    page: 1,
    size: 5,
    goodsListFrom8032: [],
  },
  /**
   * 封装分页查询
   */
  http(search, page, size) {
    request("front/goods/search", "GET", {
        search: search,
        page: page,
        size: size
      })
      .then(res => {
        this.setData({
          //老数据合并新数据做累加操作
          goodsListFrom8032: this.data.goodsListFrom8032.concat(res.data.records)
        })
      })
  },
  onLoad() {
    this.http(this.data.search,
      this.data.page, this.data.size)
  },
  /**
   * 上拉刷新，触底后更改分页查询页码
   */
  onReachBottom() {
    this.setData({
      page: this.data.page += 1
    })
    this.http(this.data.search,
      this.data.page, this.data.size)
  },
  /**
   * 点击搜索框跳转到搜索页面
   */
  clickSearch() {
    wx.navigateTo({
      url: '/pages/search/search',
    })
  },
  //点击商品跳转到详情页
  onGoodsDesc(e){
    wx.navigateTo({
      url: '/pages/goodsDesc/goodsDesc?goodsId='+e.currentTarget.dataset.goodsid,
    })
  }
})

配置

{
  "usingComponents": {
    "van-search": "@vant/weapp/search/index",
    "van-grid": "@vant/weapp/grid/index",
    "van-grid-item": "@vant/weapp/grid-item/index"
  }
}