效果图：
<!--pages/find/find.wxml-->
<include src="/components/common/common" />
<view class="item" catchtap="nav1">
<image class="icon" mode="widthFix" src="/images/icon_5.png"></image>
<view class="txt">工厂圈</view>
<view class="fenleitxt">不限私聊</view>
<image class="logo" mode="widthFix" src="/images/99.png"></image>
<image class="rrr" mode="widthFix" src="/images/editright.png"></image>
</view>
<view class="item" catchtap="nav2">
<image class="icon" mode="widthFix" src="/images/icon_6.png"></image>
<view class="txt">视频圈</view>
<image class="logo" mode="widthFix" src="/images/99.png"></image>
<image class="rrr" mode="widthFix" src="/images/editright.png"></image>
</view>
<view class="item" catchtap="nav5">
<image class="icon" mode="widthFix" src="/images/icon_9.png"></image>
<view class="txt">商品圈 <view class="hongdian"></view>
</view>
<view class="fenleitxt">分类升级中</view>
<!-- <image class="logo" mode="widthFix" src="/images/99.png"></image> -->
<image class="rrr" mode="widthFix" src="/images/editright.png"></image>
</view>
<!-- <view class="item" catchtap="nav3">
<image class="icon" mode="widthFix" src="/images/icon_7.png"></image>
<view class="txt">扫一扫</view>
<image class="rrr" mode="widthFix" src="/images/editright.png"></image>
</view> -->
<view class="item" catchtap="nav4">
<image class="icon" mode="widthFix" src="/images/icon_4.png"></image>
<view class="txt">附近商家</view>
<image class="logo" mode="widthFix" src="/images/99.png"></image>
<image class="rrr" mode="widthFix" src="/images/editright.png"></image>
</view>
<view class="item" style="margin-top:200rpx" catchtap="nav3">
<image class="icon" mode="widthFix" src="/images/icon_10.png"></image>
<view class="txt">工程招标</view>
<!-- <image class="logo" mode="widthFix" src="/images/99.png"></image> -->
<image class="rrr" style="width:50rpx" mode="widthFix" src="/images/feiji.png"></image>
</view>
<view class="tab_num" wx:if='{{tab_num>0}}'>{{tab_num}}</view>
<my_tab></my_tab>
/* pages/find/find.wxss */
.item{
display: flex;
flex-direction: row;
padding: 30rpx;
background-color: white;
position: relative;
height: 120rpx;
margin-bottom: 20rpx;
}
.fenleitxt{
position: absolute;
left: 280rpx;
font-size: 28rpx;
color: #999;
margin-top: 10rpx;
}
.hongdian{
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: red;
position: absolute;
right: 96rpx;
top: 44rpx;
}
.icon{
width: 42rpx;
max-height: 50rpx;
top: 40rpx;
position: absolute;
}
.rrr{
width: 26rpx;
max-height: 46rpx;
top: 44rpx;
position: absolute;
right: 40rpx;
}
.logo{
width: 50rpx;
top: 35rpx;
height: 50rpx;
border-radius: 10rpx;
position: absolute;
right: 90rpx;
}
.txt{
/* font-weight: 600; */
line-height: 60rpx;
font-size: 38rpx;
color: #000;
margin-left: 70rpx;
}
{
"navigationBarTitleText": "发现",
"navigationBarBackgroundColor": "#f2f2f2",
"usingComponents": {
"my_tab": "../Component/my_tab"
}
}
// pages/find/find.js
const db = wx.cloud.database()
const _ = db.command;
var that;
Page({
data: {
},
onUnload: function (options) {
getApp().page.onUnload(this);
},
onLoad: function (options) {
that = this
getApp().page.onLoad(this, options);
},
nav1() {
console.log('-------------findList')
wx.navigateTo({
url: '/pages/findList/findList',
})
},
nav5() {
wx.navigateTo({
url: '/pages/goodsList/goodsList',
})
},
nav2() {
wx.navigateTo({
url: '/pages/index/index',
})
},
nav3() {
// 允许从相机和相册扫码
// wx.scanCode({
// success (res) {
// console.log(res)
// }
// })
wx.showToast({
title: '暂无权限',
icon: 'none'
})
},
nav4() {
wx.showToast({
title: '暂无权限',
icon: 'none'
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.setData({
show_tip_msg:false
})
},
})
