小程序二维码

有需要源码的可以私信我！！！！

瀑布流的实现

首页主要是是双列瀑布流实现。
主要代码的实现。
1. vue代码的实现

<scroll-view class="main-scroll" style="height: 100%" :scroll-y="true" :scroll-with-animation="true"
				lower-threshold="100" @scrolltolower="scrollLower">
				<water-list :status="waterfall.status" :list="waterfall.list" :reset="waterfall.reset" @done="onDone"
					@clickItem="goToDetail">
					<view class="loading-box">
						<u-loadmore :status="loading" />
					</view>
				</water-list>
			</scroll-view>

2.js代码实现

methods: {
    
			// 监听高度变化
			onHeight(height, tag) {
    
				/**
				 * 这个为实际渲染后 CSS 中 margin-buttom 的值，本示例默认为20rpx
				 * 用于解决实际渲染后因为数据条数关系，高度差计算偏差的问题
				 * */
				let marginBottom = uni.upx2px(20);
				
				// console.log(`左高：${this.leftHeight},右高：${this.rightHeight},当前高：${height},插入方向：${tag}`)
				
				if (tag == 'left') {
    
					this.leftHeight += (height + marginBottom);
				} else {
    
					this.rightHeight += (height + marginBottom);
				}
				this.renderList();
			},
			// 组件点击事件
			onClick(index, tag){
    
				// 对应的数据
				if(tag == 'left'){
    
					this.$emit("clickItem",this.leftList[index],index,tag);
				}else{
    
					this.$emit("clickItem",this.rightList[index],index,tag);
				}
			},
			// 渲染列表，这里实现瀑布流的左右分栏
			renderList() {
    
				// 待渲染长度为 0 时表示已渲染完成
				if(this.awaitRenderList.length < 1){
    
					this.showPage++;
					this.$emit("done");
					
					// 为防止 js 数值类型最大值溢出，当高度值大于 1亿时重置高度
					if(this.leftHeight > 100000000){
    
						if(this.leftHeight > this.rightHeight){
    
							this.leftHeight = 2;
							this.rightHeight = 1;
						}else{
    
							this.leftHeight = 1;
							this.rightHeight = 2;
						}
					}
					return;
				}
				let item = {
    
					...this.awaitRenderList.splice(0,1)[0],
					// 当前数据添加当前页面标识
					_current_page:this.showPage,
					// 当前数据添加一个渲染id，解决 v-for 重复会出现不执行 load 的 BUG
					_render_id:new Date().getTime()
				};
				
				if(this.leftHeight > this.rightHeight){
    
					this.rightList.push(item);
				}else{
    
					this.leftList.push(item);
				}
			},
			// 重置数据
			resetData(){
    
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.leftList = [];
				this.rightList = [];
				this.awaitRenderList = [];
				// 当前展示页码数据
				this.showPage = 1;
			},
			// 启动渲染
			startRender(){
    
				if(!this.showList){
    
					this.resetData();
					return;
				}
				
				if(!this.$props.list || this.$props.list.length < 1){
    
					return;
				}
				
				// 若本次渲染为 重置 则先恢复组件的默认参数
				if(this.$props.reset){
    
					this.resetData();
				}
				
				this.awaitRenderList = [...this.$props.list];
				this.renderList();
			}
		}

左侧导航实现

vue代码

<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="left">
					<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }" :scroll-into-view="leftIntoView"
						:scroll-with-animation="true">
						<view class="item" v-for="(item,index) in leftArray" :key="index"
							:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
							@tap="leftTap">{
    {
    item}}</view>
					</scroll-view>
				</view>
				<view class="main">
					<swiper class="swiper" :style="{ 'height':scrollHeight }" :current="leftIndex"
						@change="swiperChange" :vertical="true" duration="200" :disable-touch="true">
						<swiper-item v-for="(item,index) in mainArray" :key="index">
							<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
								<view class="item">
									<view class="title">
										<u-divider :text="item.title" lineColor="#3cc51f" textColor="#3cc51f">
										</u-divider>
									</view>
									<view class="tag" v-for="(item2,index2) in item.list" :key="index2">
										<u-tag :text="item2.name" type="success" plain 
											@click="goToHome(item2)"></u-tag>
									</view>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

js代码

/* 初始化滚动区域 */
			initScrollView() {
    
				return new Promise((resolve, reject) => {
    
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
    
						this.scrollHeight = `${
      res.height}px`;
						setTimeout(() => {
    
							resolve();
						}, 100);
					}).exec();
				});
			},

搜索功能组件

<d-search-log :color_border="color_border" :color_text="color_border" :search_list_hot="search_list_hot"
				:store_key="store_key" :input_text="input_text" @onClickDelAllApi="onClickDelAll"
				@onSearchNameApi="onSearchName" :is_show_more="is_show_more"></d-search-log>

uview 组件库使用

路由跳转问题

分享转发功能

这个方法必须有 不然小程序无法实现分享