小程序电商

可爱鲸官网：keaijing.com.cn/

#微信小程序

##1.配置自定义导航栏

1.在小程序项目的根目录下创建一个名为 custom-tab-bar 的文件夹。

2.在 custom-tab-bar 文件夹中创建以下文件：

• index.js：自定义 TabBar 的逻辑代码。
• index.wxml：自定义 TabBar 的页面结构。
• index.wxss：自定义 TabBar 的样式。

3.在 app.json 文件中配置自定义 TabBar：

    "tabBar": {
        "custom": true,
        "list": [{
            "pagePath": "pages/home/index",
            "text": "首页"
        }, {
            "pagePath": "pages/classify/index",
            "text": "分类"
        }, {
            "pagePath": "pages/found/index",
            "text": "发现"
        }, {
            "pagePath": "pages/cart/index",
            "text": "购物车"
        }, {
            "pagePath": "pages/mine/index",
            "text": "我的"
        }],
        "usingComponents": {}
    }
​

4.在custom-tab-bar文件夹下的index.js中：自定义 TabBar 的逻辑代码。配置逻辑及选中/未选中的图标

Component({
    data: {
      selected: 0,
      color: "##333333",
      selectedColor: "#a1c6e0",
      list: [{
        pagePath: "/pages/home/index",
        iconPath: "/images/wode.svg",
        selectedIconPath: "/images/wode-a.svg",
        text: "首页"
      }, {
        pagePath: "/pages/classify/index",
        iconPath: "/images/fenlei.svg",
        selectedIconPath: "/images/fenlei-a.svg",
        text: "分类"
      }, {
        pagePath: "/pages/found/index",
        iconPath: "/images/faxian.svg",
        selectedIconPath: "/images/faxian-a.svg",
        text: "发现"
      }, {
        pagePath: "/pages/cart/index",
        iconPath: "/images/gouwuche.svg",
        selectedIconPath: "/images/gouwuche-a.svg",
        text: "购物车"
      }, {
        pagePath: "/pages/mine/index",
        iconPath: "/images/wode.svg",
        selectedIconPath: "/images/wode-a.svg",
        text: "我的"
      }]
    },
    methods: {
      switchTab(e) {
        const data = e.currentTarget.dataset
        const url = data.path
        wx.switchTab({url})
        // this.setData({
        //   selected: data.index
        // })
      }
    }
  })

5.在custom-tab-bar文件夹下的index.wxml中：配置、渲染数据

<view class="tab-bar">
  <view class="tab-bar-border"></view>
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

##2.微信小程序使用原生组件grid-view实现瀑布流效果。

<grid-view type="masonry" cross-axis-count="2" cross-axis-gap="8" main-axis-gap="8">
    <view>.....
    </view>
</grid-view>
//type="masonry"设置为瀑布流
//cross-axis-count="2" 交叉轴元素数量
//cross-axis-gap="8"交叉轴方向间隔
//main-axis-gap="8" 主轴方向间隔

使用image组件时，需设置image属性为mode="widthFix"（宽度不变，高度自动变化）