从实战学习微信小程序-电商首页前端（一）

最新推荐文章于 2022-11-02 15:42:07 发布
最新推荐文章于 2022-11-02 15:42:07 发布
阅读量1.9k 收藏 28
点赞数 3
分类专栏： 微信小程序 文章标签： 微信小程序 电商 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39404258/article/details/89404488
版权

      刚开始接触小程序就被分配了一个小程序的前端项目，我只能一边学习一边做，做起来发现也就那么回事，如果只看api不动手的话，那么多内容是记不住的，但不得不说微信小程序api封装了好多内容，简单好用，但微信小程序开发工具就各种出问题，不能控制台卡了就是不能复制粘贴了，我遇到这种事，只能重启软件或重启电脑，没办法，刚开始学习，很多不熟悉。

源码链接下载：https://download.csdn.net/download/qq_39404258/11141525 （积分是csdn默认设置的，我也没办法）

    那么话不多说，先上部分效果图：

   

    

    

 

 

先来分析首页：

代码：不一定所有内容都用到了，有的为了图方便，在网上拼的，命名可能不怎么规范

1.js路径：pages/home/home.js

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    swipers:[
      {
        id:0,
        imgUrl:'../img/swiper1.jpg'
      },
      {
        id: 1,
        imgUrl: '../img/swiper2.jpg'
      },
      {
        id: 2,
        imgUrl: '../img/swiper3.jpg'
      },
    ],
    indicatorDots:true,
    indicatorColor:"#000000",
    indicatorActiveColor:"#e91e56",
    autoplay:true,
    interval:3000,
    duration:500,
    circular:true,
    items:[
      {
        id:0,
        title:'红裙子',
        money:'￥200',
        imgUrl:'../img/shop1.jpg',
        sale:'￥199',
        evaluation:'23',
        sell: '33',
        abstract:'红裙子，物美价廉！'
      },
      {
        id: 1,
        title: '柠檬汁',
        money: '￥10',
        imgUrl: '../img/shop2.jpg',
        sale: '￥8',
        evaluation: '239',
        sell:'33334',
        abstract: '好喝的柠檬汁，还包邮哦亲'
      },
      {
        id: 2,
        title: '白衣服',
        money: '￥200',
        imgUrl: '../img/shop3.jpg',
        sale: '￥199',
        evaluation: '20',
        sell: '234',
        abstract: '这是一件白衣服，很普通的那种'
      },
      {
        id: 3,
        title: '抽纸',
        money: '￥27',
        imgUrl: '../img/shop4.jpg',
        sale: '￥19',
        evaluation: '2300',
        sell: '590',
        abstract: '买抽纸送抽盒了！买抽纸送抽盒了！买抽纸送抽盒了！买抽纸送抽盒了！买抽纸送抽盒了！'
      },
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  //监听页面滑动距离判断搜索栏的背景色
  onPageScroll: function (e) {
    this.setData({
      scrollTop: e.scrollTop
    })
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let that = this;
    let arr =  [
      {
        id:0,
        title:'红裙子',
        money:'￥200',
        imgUrl:'../img/shop1.jpg',
        sale:'￥199',
        evaluation:'23',
        sell: '33',
        abstract:'红裙子，物美价廉！'
      },
      {
        id: 1,
        title: '柠檬汁',
        money: '￥10',
        imgUrl: '../img/shop2.jpg',
        sale: '￥8',
        evaluation: '239',
        sell:'33334',
        abstract: '好喝的柠檬汁，还包邮哦亲'
      },
      {
        id: 2,
        title: '白衣服',
        money: '￥200',
        imgUrl: '../img/shop3.jpg',
        sale: '￥199',
        evaluation: '20',
        sell: '234',
        abstract: '这是一件白衣服，很普通的那种'
      },
      {
        id: 3,
        title: '抽纸',
        money: '￥27',
        imgUrl: '../img/shop4.jpg',
        sale: '19',
        evaluation: '2300',
        sell: '590',
        abstract: '买抽纸送抽盒了！买抽纸送抽盒了！买抽纸送抽盒了！买抽纸送抽盒了！买抽纸送抽盒了！'
      },
    ];
    that.setData({
      items: that.data.items.concat(arr)
    })
    // console.log(that.data.items)
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  /***
   * 点击进入详情页
   * ***/
  toDetail:function(e){
    console.log(e)
    wx.navigateTo({
      url: '../detail/detail',
    })
  },
  // 搜索栏input回调
  searchValue: function (res) {
    console.log(res.detail.value)
    this.setData({
      searchValue: res.detail.value
    })
  },
  // 搜索栏搜索图标
  search: function (res) {
    if (this.data.searchValue != null || this.data.searchValue !=''){
      var url = '../home/search/search';
    }
    else{
      var url = '../home/searchno/searchno';
    }
    wx.navigateTo({
      url: url,
    })

  }
 
})

解释几点基础知识：

1.图片路径    该页面和img同级，都在pages下面 ../img/shop1.png  （是两个点）

2.获取for循环的id
 var id = e.currentTarget.dataset.id; // 获得wxml的data-id的值 data-id与dataset.id对应
3.js中获得data数据 items = this.data.items;   //获得items数组  

items[id].id= xxx;

4.我们已经拿到参数，并且已经将变量更改，那么怎么赋值呢？

更新数据
let self = this;

 var id = e.currentTarget.dataset.id;

var items = this.data.items;

items[id].id= xxx;
self.setData({
      items : items     //第一个items指的data[]中的参数，第二个items指的是局部变量
    })

5. const全局变量修饰符，let局部变量修饰符（出来一个{}就失效了）var如js中的效果相同。

2.json路径：pages/home/home.js

{
  "usingComponents": {},
  "navigationBarTitleText": "良心商城",
  "enablePullDownRefresh": true
}

3.wxml路径：pages/home/home.wxml

<!--pages/home/home.wxml-->
<!-- 搜索栏 -->
<view class="searchView">
  <view class="search" style="background-color:{{scrollTop>=170 ? 'white' : ' rgba(255, 255, 255, 0)'}};padding-top:10rpx">
    <view class="search input" style="background-color:{{scrollTop>=170 ? '#E1E1E1' : ' rgba(255, 255, 255, 0.6)'}};">
      <input placeholder='请输入内容' bindinput="searchValue" bindconfirm="search" value='{{searchValue}}'></input>
      <view class="search click">
        <icon type="search" size='36rpx' catch:tap="search" style='margin-right:20rpx;'></icon>
      </view>
    </view>
    <!-- <view class="search click">
      <icon type="search" size='50rpx' catch:tap="search"></icon>
    </view> -->
  </view>
</view>
<view style='background:#EEE'>
 <!--滑块容器相关配置，以下为参数-->
  <swiper   
  indicator-dots="{{indicatorDots}}"
  indicator-color="{{indicatorColor}}"
  indicator-active-color="{{indicatorActiveColor}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  circular="{{circular}}"
>
 <!--滑块容器内只能有swiper-item组件，并且属性默认为item.属性名-->
  <block wx:for="{{swipers}}" >
    <swiper-item>
      <image src="{{item.imgUrl}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>
<view class='home-content'>
<!--分类 -->
<view class="function">
    <navigator class="function item"  url='../kind/kind' open-type="switchTab" data-id="0">
      <image class="function item img" src="../img/shop1.jpg" ></image>
      <view class="function item label">裙子</view>
    </navigator>
    <navigator class="function item" url='../kind/kind' open-type="switchTab"  data-id="1">
      <image class="function item img" src="../img/shop2.jpg"></image>
      <text class="function item label">饮品</text>
    </navigator>
    <navigator class="function item" url='../kind/kind' open-type="switchTab"  data-id="2">
      <image class="function item img" src="../img/shop3.jpg"></image>
      <text class="function item label">服装</text>
    </navigator>
    <navigator class="function item" url='../kind/kind' open-type="switchTab"  data-id="3">
      <image class="function item img" src="../img/shop4.jpg"></image>
      <text class="function item label">纸巾</text>
    </navigator>
  </view>




  <view class='home-title'>
    <text style='font-weight:bold;color:#000;padding:10rpx'>推荐</text>
    <text style='font-size:16px;padding:10rpx'>更多</text>
  </view>
</view>
<view class='lists'>
 <!--bindtap绑定事件-->
  <view class='list' bindtap='toDetail' wx:for="{{items}}" wx:for-index="index" wx:for-item="item" data-obj='{{item}}'>
    <image class='list-left' src='{{item.imgUrl}}'></image>
    <view class='list-right'>
    <view class='column'>
      <view class='right-text'>{{item.title}}</view>
      <view class='sell'>销量：{{item.sell}}</view>
      </view>
     <view>
     <view class='column'>
      <view class='sale'>{{item.sale}}</view>
      <view class='money'>{{item.money}}</view>
     </view>
     <view class='evaluation'>{{item.evaluation}}人评价</view>
      <view class='abstract'>{{item.abstract}}</view>
     </view>
    </view>
  </view>
</view>
</view>

4.wxss路径：pages/home/home.wxss

/* pages/home/home.wxss */
.slide-image{
  width: 100%;
}

/* 搜索栏 */

.searchView {
  width: 100%;
  height: 80rpx;
  z-index: 1;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
}


.search {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.search .input {
  display: flex;
  justify-content: center;
  width: 80%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50rpx;
}

.search .input input {
  width: 100%;
  height: 100%;
  font-size: 35rpx;
  /* text-align: center; *//* background-color: #e5dede; */
  padding: 0 50rpx;
  border-radius: 50rpx;
}

.search .click {
  width: 10%;
  height: 80%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/* 四个功能区 */

.function {
  width: 100%;
  height: 190rpx;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.function .item {
  width: 150rpx;
  height: 150rpx;
  display: flex;
  flex-direction: column;
}

.function .item .img {
  width: 90rpx;
  height: 90rpx;
}

.function .item .label {
  width: 150rpx;
  height: 20rpx;
  font-size: 28rpx;
  color: rgb(90, 89, 89);
}

.home-content{
  box-sizing: border-box;
}
.home-title{
  margin-top: 20rpx;
  padding-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  background: #FFF;
  box-sizing: border-box;
}
.home-title text{
  font-size: 20px;
  color: #808080;
}
.lists{
  box-sizing: border-box;
}
.list{
   padding: 30rpx 10rpx;
   background: #FFF;
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
}
.column{
   background: #FFF;
   display: flex;
   flex-direction: row;
}
.list-left{
  width:28%;
  height:120px
}
.list-right{
  width:70%;
  height:100%;
  padding-left:36rpx;
  display: flex;
  flex-direction: column;
}
.right-text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-weight:bold;
  width: 100px;
}
.money{
  text-decoration:line-through;
  font-size:10px;
  padding-left:36rpx;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  color:#808080;
}
.sale{
  color:#e91e56;
  font-weight:bold;
  font-size:20px;
}
.sell{
  width:40%;
  margin-right: 0px;
  padding-right: 0px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 10px;
  color:#808080;
}
.evaluation{
  font-size: 10px;
  color:#808080;
}
.abstract{
   padding-top:30rpx;
  font-size: 10px;
  color:#808080;
   display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

解释几点：大部分用的弹性布局flex.

1.将文字靠右侧，垂直居中
  display: flex;
  flex-direction: row-reverse;
  align-items: center;

2.两侧靠

display: flex;
justify-content: space-between;

分析一下，里面四块内容：轮播图，搜索框，主要内容区，底部选择区

1.底部选择区

底部选择区不需要在home文件夹里写，直接写在app.json下.

app.json下要注册home这个页面，先看一下app.json再逐个分析。

 

 

配置项

属性类型必填描述最低版本
pagesstring[]是页面路径列表 
windowObject否全局的默认窗口表现 
tabBarObject否底部 tab 栏的表现 
networkTimeoutObject否网络超时时间 
debugboolean否是否开启 debug 模式，默认关闭 
functionalPagesboolean否是否启用插件功能页，默认关闭2.1.0
subpackagesObject[]否分包结构配置1.7.3
workersstring否Worker 代码放置的目录1.9.90
requiredBackgroundModesstring[]否需要在后台使用的能力，如「音乐播放」 
pluginsObject否使用到的插件1.9.6
preloadRuleObject否分包预下载规则2.3.0
resizableboolean否iPad 小程序是否支持屏幕旋转，默认关闭2.3.0
navigateToMiniProgramAppIdListstring[]否需要跳转的小程序列表，详见wx.navigateToMiniProgram2.4.0
usingComponentsObject否全局自定义组件配置开发者工具 1.02.1810190
permissionObject否小程序接口权限相关设置微信客户端 7.0.0

 

代码：

{
  "pages": [
    "pages/home/home",    
    "pages/logs/logs"
   
    
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "法院报",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "borderStyle": "white",
    "selectedColor": "#e91e56",
    "color": "#808080",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "selectedIconPath": "pages/img/home_true.png",
        "iconPath": "pages/img/home_false.png"
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "分类",
        "selectedIconPath": "pages/img/kind_true.png",
        "iconPath": "pages/img/kind_false.png"
      },
      {
        "pagePath": "pages/shopcat/shopcat",
        "text": "购物车",
        "selectedIconPath": "pages/img/shopcat_true.png",
        "iconPath": "pages/img/shopcat_false.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "selectedIconPath": "pages/img/person_true.png",
        "iconPath": "pages/img/person_false.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }
}

page属性下注册首页的路径。

window属性下配置导航栏相关内容。

tabBar属性就和首页的内容有关了，我们配置了一个list数组，里面四个元素代表底部的四块内容，用来切换页面。

2.轮播图

swiper

基础库 1.0.0 开始支持，低版本需做兼容处理。

滑块视图容器。其中只可放置<swiper-item>组件，否则会导致未定义的行为。

属性类型默认值必填说明最低版本
indicator-dotsbooleanfalse否是否显示面板指示点1.0.0
indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色1.1.0
indicator-active-colorcolor#000000否当前选中的指示点颜色1.1.0
autoplaybooleanfalse否是否自动切换1.0.0
currentnumber0否当前所在滑块的 index1.0.0
intervalnumber5000否自动切换时间间隔1.0.0
durationnumber500否滑动动画时长1.0.0
circularbooleanfalse否是否采用衔接滑动1.0.0
verticalbooleanfalse否滑动方向是否为纵向1.0.0
previous-marginstring"0px"否前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值1.9.0
next-marginstring"0px"否后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值1.9.0
display-multiple-itemsnumber1否同时显示的滑块数量1.9.0
skip-hidden-item-layoutbooleanfalse否是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息1.9.0
easing-functionstring"default"否指定 swiper 切换缓动动画类型2.6.5
bindchangeeventhandle 否current 改变时会触发 change 事件，event.detail = {current, source}1.0.0
bindtransitioneventhandle 否swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}2.4.3
bindanimationfinisheventhandle 否动画结束时会触发 animationfinish 事件，event.detail 同上1.9.0

 

我们在js中有一个名为swipers的数组，里面的每个元素代表每个轮播图图片的信息。

在wxml中<swipers>中没加入样式，微信小程序已经把该有的轮播图样式给你分装好了，直接使用可以，只要wx:for="{{swipers}}"这个循环和js中的数组对应上，需要展示的参数对应上即可。以下代码从wxml中单独列了出来。

<!--滑块容器相关配置，以下为参数-->
  <swiper   
  indicator-dots="{{indicatorDots}}"
  indicator-color="{{indicatorColor}}"
  indicator-active-color="{{indicatorActiveColor}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  circular="{{circular}}"
>
 <!--滑块容器内只能有swiper-item组件，并且属性默认为item.属性名-->
  <block wx:for="{{swipers}}" >
    <swiper-item>
      <image src="{{item.imgUrl}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>

 

3.搜索栏

bindinput属性为在你输入时，后台直接及时接收到当前输入框内的参数

bindconfirm 属性是点击小键盘上的搜索按钮就触发要执行的方法

bindtap 属性 事件绑定不会阻止冒泡事件向上冒泡

catchtap 属性 事件绑定可以阻止冒泡事件向上冒泡

<!-- 搜索栏 -->
<view class="searchView">
  <view class="search" style="background-color:{{scrollTop>=170 ? 'white' : ' rgba(255, 255, 255, 0)'}};padding-top:10rpx">
    <view class="search input" style="background-color:{{scrollTop>=170 ? '#E1E1E1' : ' rgba(255, 255, 255, 0.6)'}};">
      <input placeholder='请输入内容' bindinput="searchValue" bindconfirm="search" value='{{searchValue}}'></input>
      <view class="search click">
        <icon type="search" size='36rpx' catch:tap="search" style='margin-right:20rpx;'></icon>
      </view>
    </view>
    <!-- <view class="search click">
      <icon type="search" size='50rpx' catch:tap="search"></icon>
    </view> -->
  </view>
</view>

当我点击搜索 确认时，会触发catchtap事件，进入js中处理，wx.navigateTo为微信小程序封装好的，是进行页面跳转的。

 // 搜索栏搜索图标
  search: function (res) {
    console.log("搜索信息---" + this.data.searchValue)
    if (this.data.searchValue!=null){
      var url = '../home/search/search';
    }
    else{
      var url = '../home/searchno/searchno';
    }
    wx.navigateTo({
      url: url,
    })

  }

源码链接下载：https://download.csdn.net/download/qq_39404258/11141525 （积分是csdn默认设置的，我也没办法）

干了这杯柠檬多
关注
专栏目录
微信小程序商城（前端篇）
weixin_42802870的博客
12-18 2万+
本文档是基于本人第一次接触小程序的全过程学习步骤 步骤1： 可参见小程序官方简易教程：https://developers.weixin.qq.com/miniprogram/dev/ 以下描述是基于上述教程的基础上实际上手内容 步骤2： 1、申请账号，根据指引申请账号之后获得开发者id 2、安装开发工具，根据教程指引下载安装 步骤3：新建项目：打开微信web开发者工具——选择小...
微信小程序完整商城类前端
03-17
微信小程序完整商城类前端，首页，分类页，购物车，个人中心4个导航页面均已经测过正常使用
微信小程序商城前端
04-25
自购小程序模板,商城前端,部分url需要设成自己的才能使用,
微信小程序 企业版商城前端
08-23
微信小程序企业商城前端模板 首页 分类页 关于我们 资讯页 个人中心 会员登录 可以借鉴的代码
微信小程序前端界面生成
05-14
由DIY官网设计后自动生成微信小程序前端界面代码。
微信小程序-电商-拼团 倒计时源码
10-24
总的来说，这个资源包提供了一个完整的微信小程序电商拼团倒计时功能的实现案例，对于想要学习和实践小程序开发，尤其是电商应用开发的开发者来说，是一个很好的学习材料。通过阅读文档，理解源码，并结合实际操作，...
微信小程序源码（可用于毕业设计）-电商小程序.zip
06-16
总的来说，这份“电商小程序”的源码提供了从零开始了解和实践微信小程序开发的机会，涵盖了前端UI设计、数据管理、功能实现等多个方面，对于想要从事移动互联网开发的学生或者开发者而言，是一个非常实用的学习资源...
微信小程序-蛋糕巧克力电商.zip
03-07
总之，这个压缩包为学习微信小程序开发提供了一个实际的电商案例，无论是对于初学者还是有经验的开发者，都能从中获取宝贵的经验和实战技巧。通过深入研究和实践，你将能够创建自己的微信小程序应用，满足不同业务...
微信小程序源码_电商简约模板.zip
03-08
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。...对于学习和实践微信小程序开发的开发者来说，这是一个很好的参考资料和实战案例。
009-微信小程序-IT书单.zip
最新发布
06-10
该书从设计模式的角度出发，探讨了在微信小程序开发中的最佳实践，包括组件化开发、状态管理、性能优化等方面，有助于提高代码质量和可维护性。对于有经验的开发者来说，能从中汲取到提升小程序品质的宝贵经验。 4....
电商小程序，前端页面设计demo
11-27
电商微信小程序，购物小程序，前端ui页面，供大家学习使用~~~~~~~~~~~~~~~~~~~~~~~ 仅供学习使用！~~~~~~~~~~~~~~~~~~~~~~~~~~~
商城微信小程序【前端+后台】
06-29
商城微信小程序【前端+后台】，亲测可用。【商城小程序源代码.zip】文件用于微信小程序可二次开发，上传微信使用。【商城服务器后台程序.zip】文件用于上传服务器，作为后台。没开发过小程序的不要下载。
微信小程序前端界面生成工具
03-20
微信小程序自动切片生成布局软件是一款根据效果图像画画一样来设计微信小程序，自动生成导出前端页面的快速开发工具。可以很方便、快速地生成小程序的wxml,wcss,js文件。可以大大提高您的工作效率，减少前端布局的编写工作。 功能如下： 1.切片功能：原来手工写的这部分工作，可以用切片软件的方法来切。切好后，可以自动生成wxml,wcss,js文件。 2.文字识别功能：效果图上的文字可以通过自动文字自动识别识别出来，提高录入速度，减轻工作量。 3.存档功能：设计好的切片文件可以存档，以便下次编辑。只要有切片文件在，换了程序员也可以修改和编辑。
小程序商城（前端）
05-02
小程序商城前端，商品详情页面，购物车，结算，首页，轮播
电商小程序实战教程-首页开发
低代码布道师的博客
05-27 959
零基础入门低码开发，本篇介绍首页的开发
微信小程序--首页界面 demo（一）
海到无边天作岸 山登绝顶我为峰
11-09 5325
效果图 仅含上两部分 wxml <view class="{{scrollTop>120?'top':'topx'}}"> <view class="top_a"> <view class="top_imgx"> <image class="top_img" src="https://tvax1.sinaimg.cn/crop.0.0.512....
小程序电商类首页组件
qq_41792374的博客
07-26 266
示例：搜索框使用search组件，之前封装过 代码： <template> <view class="content" :style="{ height: pageHeight, overflow: 'hidden' }"> <view class="search"> <!-- <input class="searchbox" placeholder="请输入搜索关键词" /> -->
【愚公系列】2022年11月 微信小程序-优购电商项目-首页设计
时光隧道
11-02 8825
对于小程序电商首页设计是很重要的，因为顾客打开小程序第一个看到的页面都是首页，首页的设计即要能吸引顾客，也要展现重要的推广商品。首页的设计主要分为以下几个部分：1、形象展示产品品牌是区别产品的重要标志之一，当顾客进入首页感受到这些差异并能够与其他首页有所区别，从而形成认知上的区分和对品牌的信任感。2、搜索用户使用搜索栏快速找到心仪的商品，快速定位目标。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值