布局是左边导航栏,右边可上下滑动的子类表。
用到组件:scroll-view
第一个误区:height不能使用百分百。(实践可用百分百。不必要非用rpx或者px)
目前完成了点击添加索引class显示效果,及右侧分类跳转相应位置。
classfiy.wxml
<!--classfiy.wxml-->
<import src="../templates/search" />
<import src="../templates/classfiy-list" />
<template is="search"></template>
<view class="classfiy-nav" id="classfiy-nav">
<block wx:for="{{classfiyNav}}">
<view class="nav-list {{id==index ? 'active' : ''}}" bindtap="tabClassfiy" id="nav-{{index}}" >
<text>{{item.text}}</text>
</view>
</block>
</view>
<view class="classfiy-list clearfix">
<template is="classfiy" data="{{classfiyList, id}}"></template>
</view>
classfiy-list.wxml
<template name="classfiy">
<scroll-view scroll-y="true" scroll-with-animation="true" scroll-into-view**="list-{{id}}" id="scroll-list">
<view class="classfiy-list-sm clearfix" id="list-{{index}}" wx:for="{{classfiyList}}" >
<view class="classfiy-all">{{item.text}}</view>
<block wx:for="{{item.list}}" wx:for-item="list">
<view class="nav-list-con fl">
<image src="{{list.img}}"></image>
<text>{{list.text}}</text>
</view>
</block>
</view>
</scroll-view>
</template>
classfiy.wxss
使用了固定定位 确保百分比生效。没来得及优化。
/* pages/classfiy/classfiy.wxss */
.head-mask {
opacity: 1;
}
page {
margin-top:90rpx;
}
.classfiy-nav {
margin-top: 90rpx;
height: 100%;
float: left;
position: fixed;
left: 0;
top: 0;
width: 200rpx;
background: #e6e6e6;
text-align: center;
}
.classfiy-nav .nav-list {
border-bottom: 1px solid #ccc;
}
.classfiy-nav text {
font-size: 28rpx;
line-height: 100rpx;
}
/* 这里就是右侧分类列表使用height百分比。保证scroll-into-view生效。其中height使用了计算是为了弥补搜索框固定定位占据的高度。可忽略。核心是外层壳子有100%高度。内部既可以使用100%*/
.classfiy-list {
margin-top: 110rpx;
position: fixed;
right: 0;
top: 0;
width: calc(100% - 200rpx);
height: calc(100% + 120rpx);
float: right;
text-align: center;
font-size: 24rpx;
}
.nav-list.active {
background: #fff;
border-left: 3px solid #ff8000;
box-sizing: border-box;
}
#scroll-list {
height: 100%;
}
.nav-list-con {
width: 33%;
padding: 30rpx;
box-sizing: border-box;
}
.nav-list-con image {
margin-bottom: 10rpx;
width: 100%;
height: 120rpx;
}
.classfiy-all {
margin-left: 12%;
width: 80%;
margin-top: 30rpx;
margin-bottom: 15rpx;
line-height: 60rpx;
background: #c91523;
color: #fff;
}
classfiy.js
// pages/classfiy/classfiy.js
Page({
data:{
id: 0,
classfiyNav: [
{
"text": "1"
},
{
"text": "2"
},
{
"text": "3"
},
{
"text": "4"
},
{
"text": "5"
},
{
"text": "6"
},
{
"text": "7"
},
{
"text": "8"
}
],
classfiyList: [
{
"text": "进入1频道 >",
// 示例格式
"list": [
{
"img": "xxxxxx",
"text": "xxxxxx"
}
]
}
]
},
tabClassfiy: function (e) {
var that = this;
var index = e.currentTarget.id.slice(4);
that.setData({
id: index
})
}
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})