微信小程序商城实例（二）

最新推荐文章于 2024-07-12 18:20:19 发布

前端的小小对象

最新推荐文章于 2024-07-12 18:20:19 发布

阅读量2.6k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/a736755244/article/details/102499281

版权

微信小程序专栏收录该内容

5 篇文章 7 订阅

订阅专栏

上篇文章中我们介绍了项目的整体风格，本篇将完成基础页面的设计（github地址在文末）。

针对每块内容用到的比较常见的组件、方法、注意点等进行说明总结，方便自我学习

※首先固定页面content的高度，我们写一个通用的方法

    //高度自适应
    wx.getSystemInfo({
      success: function (res) {//res中可获取页面的宽高等基本信息
        var clientHeight = res.windowHeight;
        var calc = clientHeight - 50;//这里减掉底部tabBar的高度，剩余的就是页面内容的高度
        that.setData({
          Height: calc
        })
      }
    });

下面我们介绍每部分中用到的一些小知识点

※首页部分

1、顶部搜索框

我们引入第三方搜索框：在josn文件中写入引用组件的路径，然后按照组件要求进行页面配置

{
  "usingComponents": {
    "SearchBar": "/components/searchBox/index"//组件的路径
  },
  "navigationBarTitleText": "FlowerHose"//页面名称
}

2、无限循环滚动的banner

采用swiper/swiper-item官方控件（说明文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html）

设置autoplay为true即自动播放，则可预览效果。

※注意一下两种情况：

一般情况我们引入图片默认采用的是平铺，充满我们所设置的空间，但有可能造成图片拉伸导致图片变形
设置了图片大小，但是没有效果，或者图片不显示/显示不全等问题

针对上面两个问题，这里我们封装一个方法用于计算图片的大小

imageLoad: function (e) {//获取图片真实宽度  
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      //宽高比  
      ratio = imgwidth / imgheight;
    //计算的高度值  
    var viewHeight = 750 / ratio;
    var imgheight = viewHeight;
    var imgheights = this.data.imgheights;
    //把每一张图片的对应的高度记录到数组里  
    imgheights[e.target.dataset.id] = imgheight;
    this.setData({
      imgheights: imgheights
    })
  },

3、中间部分的图文介绍相关内容统一采用flex布局

※注意：小程序中默认的块级元素是view，对应我们平时的div，如果写的不顺手的话，可以在基础样式中添加样式：

div{
    dispaly:block;
}

4、底部店长信息（卡片式列表）

循环方法：wx:for="{{list}}" wx:key="*this"
点击方法：bintap="function"
跳转方法：wx.navigateTo（这里采用带有回退按钮的跳转方式）

※点击事件传参（小程序中不能直接写成function(option)的形式，所以一般采用data-xxx的形式进行传参）

取值，赋值、跳转等操作如下示例：

//wxml
<view bindtap='toDo' data-info='exp'></view>

//js
toDo: function (e) {
   //取值
   var data = e.currentTarget.dataset.info;
   //赋值
   this.setData({
      data : data 
   })
   //跳转
   wx.navigateTo({
      url: '../card/card?id=' + data//url的路径要与app.json中的pages配置相同
   })
}

5、店长详情页

这个页面有一个常用的操作：选项卡的操作（效果见下图）

这里我们做一个优化：添加左右滑动来切换页面的操作

tab卡片选用srcoll-view控件，横向滚动（适应多个选项卡超出一个屏幕的情况）
下面对应的内容采用swiper/swiper-item控件来实现，swiper组件自带左右滑动的效果

代码及说明如下：

      //wxml
      //swichNav：点击选项卡时切换tab
      <scroll-view scroll-x="true">//横向滚动
          <view 
          class="tab-item {{currentTab==0?'active':''}}"  //对应currentTab添加active样式
          data-current="0" 
          bindtap="swichNav">name1</view>
          <view 
          class="tab-item {{currentTab==1?'active':''}}" 
          data-current="1" 
          bindtap="swichNav">name2</view>
          <view 
          class="tab-item {{currentTab==2?'active':''}}" 
          data-current="2" 
          bindtap="swichNav">name3</view>
      </scroll-view>
      //swiper的current等于几就会展示第一个swiper-item
      //binchange：滑动改变当前swiper-item时触发
      <swiper current="{{currentTab}}" duration="300" bindchange="switchTab">
          <swiper-item>tab1的内容</swiper-item>
          <swiper-item>tab2的内容</swiper-item>
          <swiper-item>tab3的内容</swiper-item>
      </swiper>
  //js
  //滚动切换标签样式
  switchTab: function (e) {
    this.setData({
      currentTab: e.detail.current
    })
  },
  //点击标题切换当前页时改变样式
  swichNav: function (e) {
    var cur = e.target.dataset.current;
    //点击当前选项卡，不做操作
    if (this.data.currentTaB == cur) { 
        return false; 
    }else {
      this.setData({
        currentTab: cur
      })
    }
  },

※店铺信息页面

与一般的网页设计相同，这里不做过多赘述

※预约页面、订单页面（实现原理同上面的店长信息）