点击上方“编程微刊”,选择“置顶公众号”
第一时间关注web前端技术干货!
在手机应用的开发中分类索引列表是很常见的功能,当然在小程序中也不会例外,很多特效还没有成熟案例,只能原生重写,所以今天在网上为大家收集整理来个非常漂亮的分类索引列表特效。今天我们就分享这样的小教程。希望对大家有所帮助。
不多说了,二当家要上图来啦!
快去拿个小板凳,坐等更多更新
注意:如若需要请联系微信geekxz
<view class="container">
<!--左侧栏-->
<view class="nav_left" style="height: {{winHeight}}px; background-color: #f5f5f5;">
<block wx:for="{{navLeftItems}}" wx:key="">
<!--当前项的id等于item项的id,那个就是当前状态-->
<!--用data-index记录这个数据在数组的下标位置,使用data-id设置每个item的id值,供打开2级页面使用-->
<view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}</view>
</block>
</view>
<!--右侧栏-->
<scroll-view scroll-y="true" class="nav_right">
<!--如果有数据,才遍历项-->
<view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
<block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}" wx:key="">
<view class="nav_right_items">
<navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">
<!--用view包裹图片组合,如果有图片就用,无图片提供就使用50x30的这个默认图片-->
<view>
<block wx:if="{{item.tree.logo}}">
<image src="{{item.tree.logo}}"></image>
</block>
<block wx:else>
<image src="http://temp.im/50x30"></image>
</block>
</view>
<!--如果有文字,就用文字;无文字就用其他-->
<view wx:if="{{item.tree.desc}}">
<text>{{item.tree.desc}}</text>
</view>
<view wx:else>
<text>{{item.tree.desc2}}</text>
</view>
</navigator>
</view>
</block>
</view>
<!--如果无数据,则显示数据-->
<view wx:else>暂无数据</view>
</scroll-view>
</view>
Page({
data: {
navLeftItems: [],
navRightItems: [],
curNav: 1,
curIndex: 0 ,
winHeight:''
},
onLoad: function(e) {
// 加载的使用进行网络访问,把需要的数据设置到data数据对象
var that = this
that.setData({
navLeftItems: data,
navRightItems: data
})
console.log(e.cateId)
/**
* 获取系统信息
*/
wx.getSystemInfo( {
success: function( res ) {
that.setData( {
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
//事件处理函数
switchRightTab: function(e) {
// 获取item项的id,和数组的下标值
let id = e.target.dataset.id,
index = parseInt(e.target.dataset.index);
// 把点击到的某一项,设为当前index
this.setData({
curNav: id,
curIndex: index
})
}
})
page{
background: #fff;
}
/*总体主盒子*/
.container {
position: relative;
width: 100%;
height: 100%;
background-color: #f5f5f5;
color: #939393;
padding-bottom: 22px;
}
/*左侧栏主盒子*/
.nav_left{
/*设置行内块级元素(没使用定位)*/
display: inline-block;
width: 25%;
height: 100%;
/*主盒子设置背景色为灰色*/
background: #f5f5f5;
text-align: center;
}
/*左侧栏list的item*/
.nav_left .nav_left_items{
/*每个高30px*/
height: 30px;
/*垂直居中*/
line-height: 30px;
/*再设上下padding增加高度,总高42px*/
padding: 6px 0;
/*只设下边线*/
/* border-bottom: 1px solid #dedede; */
/*文字14px*/
font-size: 14px;
}
/*左侧栏list的item被选中时*/
.nav_left .nav_left_items.active{
/*背景色变成白色*/
background: #fff;
border-left: 6rpx solid red;
}
/*右侧栏主盒子*/
.nav_right{
/*右侧盒子使用了绝对定位*/
position: absolute;
top: 0;
right: 0;
flex: 1;
/*宽度75%,高度占满,并使用百分比布局*/
width: 75%;
height: 100%;
padding: 10px;
box-sizing: border-box;
background: #fff;
}
/*右侧栏list的item*/
.nav_right .nav_right_items{
/*浮动向左*/
float: left;
/*每个item设置宽度是33.33%*/
width: 33.33%;
height: 80px;
text-align: center;
}
.nav_right .nav_right_items image{
/*被图片设置宽高*/
width: 50px;
height: 30px;
}
.nav_right .nav_right_items text{
/*给text设成块级元素*/
display: block;
margin-top: 5px;
font-size: 10px;
/*设置文字溢出部分为...*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
注意路径问题
获取data数据请加 微信:geekxz
极客小寨:专注技术干货分享
围观
丨更多
热文
丨更多
热文
丨更多
热文
One More Thing...
6.16日限时领取干货资源链接:请尽快领取。
Linux 之 Nginx 服务器负载均衡与反向代理 网站架构实战视频教程
链接:https://pan.baidu.com/s/1rqYY6Apm4UNeS9mtckfOHg 密码:yfe9