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

效果图:

样式集(七)仿微信发现页样式_第1张图片


  

	
	工厂圈
	不限私聊
	
	



	
	视频圈
	
	


	
	商品圈 
	
	分类升级中
	
	



	
	附近商家
	
	


	
	工程招标
	
	

{{tab_num}}
/* 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
    })
  },

})

 

你可能感兴趣的:(云开发,微信小程序,Web前端,小程序模拟微信发现页面样式,小程序模拟微信发现页面,样式)