样式集(七)仿微信发现页样式

效果图:

<!--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
    })
  },

})

 

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值