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

2022-07-17 23:39:44 阅读：280 来源： 互联网

标签：right 桂工微 name 100% height 构思 image png 页面

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

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"
    }
  ]
  },
  onl oad(options) {

  },
  onClickClassify(e){
    let classifyId = e.target.dataset.id;
    this.setData({
      clickId:classifyId
    })
    console.log(classifyId,this.data.clickId)
  },

  onShareAppMessage() {

  }
})

标签：right,桂工微,name,100%,height,构思,image,png,页面
来源： https://www.cnblogs.com/lishilin-glut/p/16488890.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9