微信小程序实战之分类导航内容滑动【微信】

{
"component": true,
"usingComponents": {},
"navigationBarTitleText": "宠物百科"
}

/* pages/baike/index.wxss */
/* 1. 设置整个页面的背景颜色 */
page{
background:#f5f5f5;
/* 避免左侧Item不够时 被白色覆盖*/
}
/* 2.主盒子 */
.container {
width: 100%; /* 宽度占屏幕的100% */
height: 100%; /* 高度占屏幕的100% */
background-color:#fff; /* 背景颜色 */
}
/* 3.左盒子*/
.nav_left{
position:absolute; /* 使用绝对定位 */
top:0px; /* 距离上边距：0px */
left:0px; /* 距离左边距：0px */
width: 25%; /* 每个item所占的宽度 */
background: #f5f5f5; /* 主盒子设置背景色为灰色 */
text-align: center; /* 文字居中显示 */
}
.nav_left .nav_left_items{
height: 15px; /* 每个item高40px*/
padding: 15px 0; /* 上内边距和下内边距是 6px[增加高度] 右内边距和左内边距是 0px*/
border-bottom: 1px solid #dedede; /* 设置下边线 */
font-size: 14px; /* 设置文字大小：14px */
}
.nav_left .nav_left_items.active{
background: #fff;
color: #CC812B;
/*border-left: 3px solid #3385ff;*/
}
/* 4.右盒子 */

/* 4.1. 右侧栏主盒子总体设置 */
.nav_right{
position: absolute; /* 使用绝对定位 */
top: 0; /* 距离上边距：0px */
left: 80px; /* 距离左边距：80px */
width: 75%; /* 右侧主盒子所占宽度 */
height: 600px; /* 右侧主盒子所占高度 */
padding: 10px; /* 所有 4 个内边距都是 10px*/
box-sizing: border-box; /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
background: #fff; /* 右侧主盒子背景颜色 */
}

/* 4.2. 右侧栏中的每个item */
.nav_right .nav_right_items{
float: left; /* 浮动向左 */
width: 50%; /* 每个item设置宽度是33.33% */
height: 240rpx; /* 每个item设置高度是120px */
text-align: center; /* 设置图片下方的提示文字居中显示 */
}
.nav_right .nav_right_items image{
width: 240rpx; /* 给图片设置宽度 */
height: 200rpx; /* 给图片设置高度 */
border-radius: 20rpx; /* 给图片添加圆角边框 */
float: left;
}
.nav_right .nav_right_items text{
width: 240rpx;
height: 30rpx;
float: left;
font-size: 24rpx;
color: #666;
}
.nav_right_default{
margin-top: 50%;
text-align: center;
font-size: 24rpx;
color: #999;
}

<view class="container">
<!--左侧栏-->
<view class='nav_left'>
<view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-id="{{item.id}}" wx:for="{{cateList}}" wx:key="{{index}}">
{{ item.title }}
</view>
</view>
<!--左侧栏结束-->
<!--右侧内容-->
<view class="nav_right">
<view class="nav_right_items" wx:for="{{petsList}}" wx:key="{{item.id}}" wx:if="{{petsList.length != 0}}">
<image src="{{item.cover}}" bindtap="getDetail" data-id="{{item.id}}"></image>
<text>{{item.title}}</text>
</view>
<view class="nav_right_default" wx:if="{{petsList.length == 0}}"> 暂无内容 </view>
</view>
<!--右侧内容结束-->
</view>

const app = getApp();
var openid = wx.getStorageSync('openid');
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },
  /**
   * 组件的初始数据
   */
  data: {
    curNav: 3,
    cateList: [],
    petsList: [],
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /* 把点击到的某一项 设为当前curNav   */
    switchRightTab: function(e) {
      let id = e.target.dataset.id;
      this.setData({
        curNav: id
      })
      this.getPetsList(id);
    },
    /**进入文章详情 */
    getDetail: function(e) {
      var id = e.currentTarget.dataset.id;
      wx.navigateTo({
        url: 'detail/detail?id=' + id,
        success: function(res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('acceptDataFromOpenerPage', {
          })
        }
      })
    },
    getPetsList: function(id) {
      var that = this;
      wx.request({
        url: app.config.serverCfg.domain.topic,
        data: {
          page: '1',
          size: '20',
          id: id
        },
        success(res) {
          that.setData({
            petsList: res.data.data,
          });
        }
      })
    },
    /*页面加载时进行分类数据的请求*/
    onLoad: function(options) {
      var that = this;
      wx.request({
        url: app.config.serverCfg.domain.cate,
        data: {
          page: '1',
          size: '20'
        },
        success(res) {
          that.setData({
            cateList: res.data.data,
          });
          that.getPetsList(res.data.data[0]['id']);
        }
      })
    },
  }
})