【桂工微拍】一：页面构思和设计-导航栏+搜索页+分类页

桂工微拍开发文档(小程序)

1、页面设计

1-1、底部导航栏设计

    "tabBar": {
      "selectedColor": "yellow",
      "borderStyle": "white",
      "color": "#ffffff",
      "list": [
        {
          "pagePath": "pages/classify/classify",
          "iconPath": "/image/category-no.png",
          "selectedIconPath": "/image/category-yes.png",
          "text": "分类"
        },
        {
          "pagePath": "pages/search/search",
          "iconPath": "/image/search-no.png",
          "selectedIconPath": "/image/search-yes.png",
          "text": "搜索"
        },
        {
          "pagePath": "pages/person/person",
          "text": "我的",
          "iconPath": "/image/person-no.png",
          "selectedIconPath": "/image/person-yes.png"
        }
      ]
    },

 

1-3、设置窗口100%显示且没有滚动条

.auto{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

 

知识点：页面元素定位：

值 描述 absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 fixed： 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative： 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。 static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit 规定应该从父元素继承 position 属性的值。

1-4、页面效果

 

 

 

 

1-5、页面代码

1-5-1、classify.wxml

 

<!-- 分类页 -->
<!-- 父组件 -->
<view class="main">  
  <!-- 左边分类栏 -->
  <view class="leftcontainer">
    <block wx:for="{{classifys}}" wx:key="index">
      <view class="classifyItem{{item.id == clickId? 'active':''}}" bindtap="onClickClassify" data-id="{{item.id}}">
        {{item.name}}
        
      </view>
    </block>
  </view>
  <!-- 右侧内容栏 -->
  <view class="rightContainer">
    <block wx:for="{{goods}}" wx:key="index">
    <block wx:if="{{item.classifyId==clickId}}">
      <view class="goodsContainer">
        <view class="img">
          <image src="{{item.imageUrl}}"></image>
        </view>
        <view class="goodsInfo">
          <view class="title">{{item.name}}</view>
          <view class="startPrive">起拍价：{{item.startPrice}}</view>
          <view class="currentPrice">当前价：{{item.currentPrice}}</view>
        </view>
​
      </view>
    </block>
    </block>
  </view>
</view>

 

1-5-2、classify.wxcss

/* 分类 */
page{
  height: 100%;
  padding: 0;
  margin: 0;
}
/*整体*/  
.main {    
  bottom: 0;
  top:0;
  left: 0;
  right: 0;
  position: fixed;
  width: 100%;  
  height: 100%;  
  background-color: #fff;  
  color: #939393;  
  border: solid 2px yellow;
  }
​
.leftcontainer{
  display: inline-block;  
  width: 30%;  
  height: 100%;    
  background: #eeecec;  
  text-align: center;
  
}
.classifyItem{
  margin: 10px;
}
.classifyItemactive{
  margin: 10px;
  background: rgb(221, 245, 5);
}
.rightContainer{
  position: absolute;
  top: 0;  
  right: 0;  
  flex: 1;  
  width: 70%;  
  height: 100%;  
  padding: 10px;  
  box-sizing: border-box;  
  background: rgb(236, 235, 241);
}
​
.goodsContainer{
  border-bottom:1px solid #615858ad;
  margin-top: 10px;
  height: 100px;
}
​
.goodsContainer .img{
  float:left;
  width:50%;
  height: 100px;
}
.goodsContainer .img image{
  width:100%;
  height:100%;
}
.goodsInfo{
  float:right;
}
.currentPrice{
  color: red;
}

 

1-5-3、classify.js

// pages/classify/classify.js
Page({
​
  data: {
    clickId:11,
    classifys:[
      {
      id: 11,
      name:"图书"
      },
      {
        id: 12,
        name: "电子产品"
      },
      {
        id: 13,
        name: "其他"
      }
  ],
  goods:[
    {
      id: 10000,
      classifyId: 12,
      name:"听力耳机",
      startPrice:15,
      currentPrice:20,
      goodsDesc:"完好无损",
      imageUrl:"/image/listenHeadset.jpg"
    },
    {
      id: 10001,
      classifyId: 13,
      name:"靠背椅",
      startPrice:30,
      currentPrice:40,
      goodsDesc:"这是一把用来两年的椅子",
      imageUrl:"/image/kaobeiyi.png"
    },
    {
      id: 10001,
      classifyId: 13,
      name:"靠背椅",
      startPrice:30,
      currentPrice:30,
      goodsDesc:"这是一把用来两年的椅子",
      imageUrl:"/image/kaobeiyi.png"
    }
  ]
  },
  onLoad(options) {
​
  },
  onClickClassify(e){
    let classifyId = e.target.dataset.id;
    this.setData({
      clickId:classifyId
    })
    console.log(classifyId,this.data.clickId)
  },
​
  onShareAppMessage() {
​
  }
})