小程序笔记 ------------- tree
小程序的分类布局，左树和右侧的类别
wxml布局
1 <view class='typeContent'> 2 <scroll-view scroll-y class='oneTypeBox'> 3 <view class='{{oneLevelIndex == index ? " current":""}}' wx:for="{{ret}}" wx:key="index" data-id='{{item.pid}}' data-index="{{index}}" bindtap='onOneLevel'> 4 <text>{{item.name}}</text> 5 </view> 6 </scroll-view> 7 <view class='rightTwoTypeBox'> 8 <!-- <scroll-view scroll-y class='twoTypeScroll' scroll-into-view="{{ toView }}" bindscroll="handleBindScroll"> 9 <view class='twoTypeBox contlist' wx:for="{{oneLevelList}}" wx:key="index" id="{{'p' + item.id }}" > 10 <view class='threeTypeBox' wx:if="{{item.children.length > 0}}"> 11 <view wx:for="{{item.children}}" wx:key="childIndex" wx:for-item="childItem" wx:for-index="childIndex" data-index="{{index}}" data-goodsId="{{childItem.id}}" bindtap='onType'> 12 <image src='{{childItem.imgUrl}}'></image> 13 <view>{{childItem.name}}</view> 14 </view> 15 </view> 16 <view wx:else class='no_classity'>暂无分类</view> 17 </view> 18 </scroll-view> --> 19 20 <scroll-view scroll-y class='twoTypeScroll'> 21 <view class='twoTypeBox contlist' > 22 <view class='threeTypeBox' wx:if="{{childList.length > 0}}"> 23 <view wx:for="{{childList}}" wx:key="childIndex" wx:for-item="childItem" wx:for-index="childIndex" data-pageNum='{{childItem.jdPageNum}}' data-isJd='{{childItem.isJd}}' data-index="{{index}}" data-goodsId="{{childItem.id}}" bindtap='onType'> 24 <image src='{{childItem.imgUrl}}'></image> 25 <view>{{childItem.name}}</view> 26 </view> 27 </view> 28 <view wx:else class='no_classity'>暂无分类</view> 29 </view> 30 </scroll-view> 31 32 </view> 33 </view>
wxcss布局
1 page{ 2 width: 100%; 3 height: 100%; 4 } 5 .type_content{ 6 width: 100%; 7 height: 100%; 8 display: flex; 9 flex-direction: column; 10 } 11 .type_content .searchBox { 12 height: 80rpx; 13 background-color: rgb(249, 250, 250); 14 display: flex; 15 align-items: center; 16 justify-content: center; 17 } 18 19 .searchBox > navigator { 20 height: 50rpx; 21 width: 80%; 22 background-color: #eee; 23 border-radius: 28rpx; 24 text-align: center; 25 } 26 .searchBox> navigator > text:nth-of-type(1){ 27 color: #999999; 28 font-size: 25rpx; 29 margin-right: 8rpx; 30 } 31 .searchBox> navigator > text:nth-of-type(2){ 32 font-size: 25rpx; 33 color: #333333; 34 } 35 .type_content .typeContent { 36 display: flex; 37 flex: 1; 38 } 39 .type_content .typeContent .oneTypeBox { 40 height: 100%; 41 width: 170rpx; 42 background-color: #f5f5f5; 43 flex-shrink: 0; 44 } 45 .type_content .typeContent .oneTypeBox view { 46 height: 102rpx; 47 display: flex; 48 align-items: center; 49 padding-left: 7rpx; 50 } 51 .type_content .typeContent .oneTypeBox view text { 52 font-size: 28rpx; 53 color: #1b1b1b; 54 text-align: center; 55 width: 100%; 56 border-left: 5rpx solid #f5f5f5; 57 } 58 .type_content .typeContent .oneTypeBox view.current { 59 background-color: #FFF; 60 } 61 .type_content .typeContent .oneTypeBox view.current text { 62 color: #ea0303; 63 border-left: 5rpx solid #ea0303; 64 } 65 .type_content .typeContent .rightTwoTypeBox { 66 width: calc(100% - 170rpx); 67 /* flex: 1 */ 68 } 69 .type_content .typeContent .rightTwoTypeBox .searchTypeBox { 70 71 background-color: #f5f5f5; 72 display: flex; 73 } 74 .type_content .typeContent .rightTwoTypeBox .searchTypeBox > view { 75 flex: 1; 76 height: 100rpx; 77 display: flex; 78 align-items: center; 79 justify-content: center; 80 } 81 .type_content .typeContent .rightTwoTypeBox .searchTypeBox > view > text:nth-child(1){ 82 color: #b4b4b4; 83 font-size: 38rpx; 84 margin-right: 10rpx; 85 } 86 .type_content .typeContent .rightTwoTypeBox .searchTypeBox > view > text:nth-child(2) { 87 color: #272727; 88 font-size: 26rpx; 89 } 90 .type_content .typeContent .rightTwoTypeBox .searchTypeBox > view:nth-child(1) > text:nth-child(1) { 91 font-size: 44rpx; 92 } 93 .type_content .typeContent .rightTwoTypeBox .searchTypeBox > view.current > text { 94 color: #ea0303; 95 } 96 .type_content .typeContent .rightTwoTypeBox .twoTypeScroll { 97 background-color: #FFF; 98 height: calc(100vh - 88rpx); 99 } 100 .type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox{ 101 padding: 38rpx 30rpx 0rpx 30rpx; 102 border-top: 1px solid #dcdcdc; 103 104 } 105 .type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox:nth-child(1){ 106 border-top: 0; 107 } 108 .type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox .twoTypeName { 109 font-size: 30rpx; 110 color: #1b1b1b; 111 font-weight: bold; 112 } 113 .type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox .threeTypeBox { 114 margin-top: 50rpx; 115 display: flex; 116 justify-content: left; 117 flex-wrap: wrap; 118 padding: 0 19rpx; 119 } 120 .type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox .threeTypeBox >view { 121 /* width: 136rpx; */ 122 width: 33%; 123 text-align: center; 124 } 125 .type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox .threeTypeBox >view > image{ 126 /* width: 100%; */ 127 width: 136rpx; 128 height: 136rpx; 129 } 130 .type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox .threeTypeBox >view > view { 131 height: 85rpx; 132 text-align: center; 133 font-size: 26rpx; 134 color: #1b1b1b; 135 width: 100%; 136 overflow: hidden; 137 white-space: nowrap; 138 text-overflow: ellipsis; 139 } 140 .no_classity{ 141 width:100%; 142 text-align:center; 143 margin:0px auto 40rpx; 144 }
js文件的左侧选项的单击事件
1 onOneLevel(e) { 2 console.log(e); 3 let { id, index } = e.currentTarget.dataset; 4 console.log(id, index) 5 this.setData({ 6 toView: id, 7 oneLevelIndex:index, 8 childList: this.data.oneLevelList[index].children 9 }); 10 },
