一、效果

 二、代码

复制代码可以直接用

1、json代码

{"usingComponents": {},"navigationStyle": "custom"
}

2、xml代码

<!--pages/find_module/findPage.wxml-->
<view class="container_serach"><!-- 搜索模块 --><!-- 头部搜索 --><view class="title_search"><view class="seeck_md" bindtap="finish_back"><!--消息--><view class="msg" bindtap="open_msg"><image class="msg_ic" src="/images/titelsearch/search_msg.png"></image><text class="msg_txt">消息</text><view class="msg_tag" hidden="{{noNewMsgs}}" /></view><!--头标--><view class="ahead_md" bindtap="searchtopage"><image class="title_icon_ss" hidden="true" src="/images/tabars/person_select.png"></image><!--搜索--><view class="search_md"><image class="seeck_ic" src="/images/titelsearch/search_icon.png"></image><image class="vioce_icon" src="/images/titelsearch/search_vioce.png"></image></view></view><!-- 退出 --><view class="logout" hidden="true"><image class="logout_ic" src="/images/titelsearch/search_logout.png"></image><text class="logout_txt">退出</text></view></view></view><!-- 头部搜索 --><!-- Tab布局 推荐 营养 跌倒--><!-- 导航栏navigationbar --><scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100% ; background:white"><view class='navBox'><block wx:for="{{dataHubList}}" wx:key="index" wx:id="index" wx:for-item="itemName"><view class='titleBox' id="{{index}}" bindtap='tabTitleClick' data-idx='0'><text class="{{index == currentIndex ? 'fontColorBox' : ''}}">{{itemName.name}}</text><hr class="{{index == currentIndex ? 'lineBox' : 'notLineBox'}}" /></view></block></view></scroll-view><!-- body --><!-- 内容布局 --><swiper class='swiperTtemBox' bindchange='pagechange' duration="300" current='{{currentIndex}}'><block wx:for="{{4}}" wx:key="parent_index" wx:id="parent_index" wx:for-item="parent_itemName"><!--健康知识列表 catchtouchmove='onTouchMove' --><swiper-item class='swiperTtemBox'><!-- 列表 --><scroll-view class='scbg' scroll-y='true'><!-- 轮播图 --><view class="page-section" style="margin-top: 30rpx;"><swiper indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}" vertical="{{false}}" interval="{{3200}}" duration="{{200}}" previous-margin="{{0}}px" next-margin="{{0}}px"><block wx:for="{{deal}}" wx:key="index" wx:for-item="itemName"><swiper-item style="border-radius: 10rpx;background-color: transparent;"><image class="swiper-item" src="{{itemName.url}}"></image><text class="swiper_txt">{{itemName.name}}</text></swiper-item></block></swiper></view><!-- 列表 --><view class="list_title">{{dataHubList[currentIndex].name}}</view><view class="waterfall"><block wx:for="{{list}}" wx:key="index" wx:for-index="id" wx:for-item="itemName"><view class="item"><image class="list_item_pic" mode='scaleToFill' src="{{itemName.url}}"></image><text class="item_conn_des">{{itemName.name}}</text></view></block></view></scroll-view></swiper-item></block></swiper></view>

3、css代码

/* pages/find_module/findPage.wxss *//* 页面全局样式设置 */
page {background: #eeecec;left: 0rpx;right: 0rpx;
}/* scroll-view去掉滚动条 */
scroll-view ::-webkit-scrollbar {display:none;width:0;height:0;color:transparent;
}.container_serach {display: flex;flex-direction: column;width: 100%;height: 91%;left: 0rpx;right: 0rpx;top: 0rpx;overflow: hidden;
}/* 头部搜索 *//* 搜索标题 */
.title_search {background: linear-gradient(to right, #0455a7, #62c8ec);height: 170rpx;width: 100%;display: flex;flex-direction: row;align-items: flex-end;justify-content: flex-start;
}/* 搜索模块样式 */
.seeck_md {display: flex;flex-direction: row;width: 100%;justify-content: space-between;align-items: flex-end;
}/* 头部头像样式 */
.ahead_md {display: flex;flex-direction: row;width: 100%;margin-bottom: 20rpx;
}.title_icon_ss {height: 70rpx;width: 70rpx;background-color: white;border-radius: 35rpx;margin-left: 20rpxrpx;
}/* 消息提示 */
.msg_tag {position: absolute;background-color: #ff6162;width: 14rpx;height: 14rpx;border-radius: 7rpx;margin-bottom: 72rpx;margin-left: 24rpx;
}/* 搜索部分bg*/
.search_md {background-color: #69ccf1;margin-left: 10rpx;height: 70rpx;width: 390rpx;border-radius: 35rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;
}/* 搜索 */
.seeck_ic {height: 46rpx;width: 46rpx;margin-left: 20rpx;border-radius: 23rpx;
}/* 语音 */
.vioce_icon {height: 46rpx;width: 46rpx;border-radius: 23rpx;margin-right: 20rpx;
}/* 消息 */
.msg {width: 100rpx;height: 90rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;margin-right: 0rpx;margin-left: 30rpx;
}/* 消息图片标记 */
.msg_ic {height: 44rpx;width: 48rpx;margin-right: 2rpx;margin-right: 10rpx;
}/* 消息文本 */
.msg_txt {font-size: 24rpx;height: 40rpx;width: 60rpx;margin-bottom: 20rpx;align-items: flex-start;color: #fff;display: flex;justify-content: flex-start;
}/* 退出 */
.logout {width: 100rpx;height: 90rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;margin-right: 30rpx;
}/* 退出页面按钮样式 */
.logout_ic {height: 44rpx;width: 48rpx;margin-right: 2rpx;
}/* 退出页面文本描述样式 */
.logout_txt {font-size: 24rpx;height: 40rpx;width: 60rpx;margin-bottom: 20rpx;align-items: flex-start;color: #fff;display: flex;justify-content: flex-start;
}/* 搜索标题 */
/* 头部搜索  *//* 轮播图 */
.page-body {padding-top: 60rpx;
}.page-section {width: 100%;margin-bottom: 40rpx;box-sizing: border-box;padding-left: 30rpx;padding-right: 30rpx;
}.swiper-item {height: 150px;width: 100%;border-radius: 10rpx;
}/* 轮播图内容标题txt */
.swiper_txt {color: #666666;font-size: 30rpx;width: 240rpx;font-weight: bolder;position: relative;bottom: 70rpx;margin-left: 20rpx;white-space: nowrap;text-overflow: ellipsis;align-items: flex-start;display: -webkit-box;overflow: hidden;
}/* 轮播图 *//* tab标签模块 */
.navBox {width: 100%;height: 80rpx;background: white;display: flex;flex-direction: row;align-items: center;justify-content: center;
}/* 子iten */
.titleBox {/* 未选中文字的样式 */color: rgb(168, 170, 175);font-size: 30rpx;display: flex;flex-direction: column;align-items: center;justify-content: flex-end;width: 200rpx;height: 100%;
}.fontColorBox {/* 文字默认颜色 */color: #00c6ac;
}.lineBox,
.notLineBox {/* 选中及未选中底线共同样式 */width: 60rpx;height: 4rpx;margin-top: 16rpx;border-radius: 4rpx;
}.lineBox {/* 选中底线样式 */background: #00c6ac;width: 180rpx;height: 4rpx;margin-top: 16rpx;border-radius: 4rpx;
}#aiding,
#aidfinish {margin-left: 0rpx;
}/* tab标签模块 *//* 列表部分 */
/* 列表页面 */
.swiperTtemBox {height:calc(100vh - 360rpx);overflow: scroll;margin: 0rpx 0rpx;background: #f0f0f0;font-size: 28rpx;
}/* scrollview */
.scbg {background-color: #f0f0f0;width: 100%;height: calc(100vh - 360rpx);left: 0rpx;right: 0rpx;top: 0rpx;padding-bottom: 20rpx;
}/* 列表标题 */
.list_title {background-color: transparent;margin-right: 30rpx;margin-left: 30rpx;margin-bottom: 20rpx;color: #000;font-weight: 800;font-size: 36rpx;
}/* item */
.waterfall {display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 0.5em;grid-auto-flow: row dense;grid-auto-rows: 15px;margin-left: 30rpx;margin-right: 30rpx;
}.waterfall .item {width: 100%;background: #f0f0f0;color: #ddd;
}.waterfall .item:nth-of-type(2n+1) {grid-row: auto / span 7;border-radius: 10rpx;
}.waterfall .item:nth-of-type(2n+2) {grid-row: auto / span 5;border-radius: 10rpx;
}/* .waterfall .item:nth-of-type(3n+3) {grid-row: auto / span 12;border-radius: 10rpx;
} *//* item图片 */
.list_item_pic {height: 100%;width: 100%;border-radius: 10rpx;
}/* item文本 */
.item_conn_des {color: #666666;font-size: 26rpx;width: 240rpx;font-weight: bolder;position: relative;bottom: 70rpx;margin-left: 10rpx;white-space: nowrap;text-overflow: ellipsis;align-items: flex-start;display: -webkit-box;overflow: hidden;
}/* 列表部分 */

4、js代码

说明下js文件中的dataurl为图片地址，打不开的可以自行百度换一个图片替代

  {

      name: '面包',

      num: '1',

      title: '面包',

      url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/b0fe4413-9055-4b6c-861d-88f38860eff5.png',

    },

// pages/find_module/findPage.ts
Page({data: {deal:[{name: '裤子',url:'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/cb643adf-0653-4e25-82c9-e27c99ef2a4e.png'},{name:'鞋子',url:'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/06/24/da9c497c-c822-45ad-89da-3ad8b50e6ed3.png'},{name:'外套',url:'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/b0fe4413-9055-4b6c-861d-88f38860eff5.png'}],list: [{name: '电视',num: '1',title: '测试数据测试测试测试测测试数据测试测试测试测测试数据测试测试测试测测试数据测试测试测试测',url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/cb643adf-0653-4e25-82c9-e27c99ef2a4e.png',},{name: '家电',num: '1',title: '测试数据测试测试测试测测试数据测试测试测试测测试数据测试测试测试测测试数据测试测试测试测',url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/06/24/da9c497c-c822-45ad-89da-3ad8b50e6ed3.png',},{name: '鞋子',num: '1',title: '鞋子',url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/b0fe4413-9055-4b6c-861d-88f38860eff5.png',},{name: '水果',num: '1',title: '水果',url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/cb643adf-0653-4e25-82c9-e27c99ef2a4e.png',},{name: '水桶',num: '1',title: '水桶',url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/b0fe4413-9055-4b6c-861d-88f38860eff5.png',},{name: '饮料',num: '1',title: '饮料',url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/06/24/da9c497c-c822-45ad-89da-3ad8b50e6ed3.png',},{name: '生鲜',num: '1',title: '生鲜',url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/b0fe4413-9055-4b6c-861d-88f38860eff5.png',},{name: '肉类',num: '1',title: '肉类',url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/cb643adf-0653-4e25-82c9-e27c99ef2a4e.png',},{name: '面包',num: '1',title: '面包',url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/b0fe4413-9055-4b6c-861d-88f38860eff5.png',},{name: '大米',num: '1',title: '大米',url: 'http://183.214.193.179:9000/zykj-cloud-prod/undefined/2022/04/14/cb643adf-0653-4e25-82c9-e27c99ef2a4e.png',}],dataHubList:[{name:'推荐',id:0},{name:'营养',id:1},{name:'跌倒',id:2},{name:'应急',id:3}],currentIndex:0,findChoose: true,//选中标记},/*** 生命周期函数--监听页面加载*/onLoad() {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},// tab事件监听tabTitleClick:function(e:any){//  console.log("===当前选择tabid==="+JSON.stringify(e.currentTarget.id));var that = this;that.setData({//拿到当前索引并动态改变currentIndex: e.currentTarget.id})},// 页面事件pagechange:function(e:any){// console.log("===sankni==="+JSON.stringify(e));var that = this;that.setData({//拿到当前索引并动态改变currentIndex: e.detail.current})},// 列表滑动切换事件监听onTouchMove:function(){},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {},// 打开消息页面open_msg: function () {wx.navigateTo({url: '/pakagemsg/pages/msg/msg'})},// 搜索finish_back: function () {wx.showToast({title: '暂无可搜索数据...',icon: 'loading',mask: true,duration: 1000})// wx.navigateTo({//   url: "/pages/healthyhead/searchmodule/searchapge"// })},// 健康页first_select: function () {wx.redirectTo({url: "/pages/home/healthypage"})},// 服务four_select: function () {wx.redirectTo({url: '/pages/services/servicespage'})},//我的five_select: function () {wx.redirectTo({url: '/pages/personal/myinfo'})},//拨号three_select: function () {wx.showModal({content: '是否发起一键呼救?',confirmText: '确定',cancelText: '取消',success(res) {if (res.confirm) {wx.makePhoneCall({phoneNumber: '120',success: function () {console.log("拨打电话成功！")},fail: function () {console.log("拨打电话失败！")}})console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}})},})