样式集（七）仿微信发现页样式

效果图：

<!--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 = thisgetApp().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})},})

样式集（七）仿微信发现页样式相关推荐

移动软件开发-仿微信发现页
一.实验目标 1.了解安卓开发的一些基础知识:2.学习如何仿微信发现页创建布局,了解安卓开发的线性布局和一些对应的组件. 二.实验步骤 1.实验准备: 下载android studio,并配置好相应的 ...
移动软件开发五——仿微信发现界面
2022年夏季<移动软件开发>实验报告一.实验目标模仿微信"发现"页创建列表布局,学习使用Textview imageview.LinearLayout 二.实验步 ...
微信隐藏功能系列：微信发现页管理，强迫症人士必看
不知不觉小编已经给大家分享了许多微信隐藏功能了,大家每次看到一个新的微信隐藏功能时,是否都会和小编一样,眼前一亮呢?这次给大家带来的微信隐藏功能是微信发现页管理. 微信的发现页我们都知道在哪里吧,简单 ...
php+仿微信公众号样式,仿微信公众号富文本编辑器
微信公众号富文本编辑器使用百度ueditor插件为基础加以封装百度ueditor配置提供替换皮肤,只要添加相应的样式即可(码云代码链接) TIM截图20190404150153.png 以下处理富文 ...
样式集（11）注册页面样式，全部代码附效果图
效果图: 代码: <template><view class="page"><view class="top">新用户注册& ...
样式集（四）搜索框样式
上图: 代码: // pages/search/search.js var text=''Page({data: {input_val:"",list:[]},input_p(e) ...
样式集（三）成功页面样式模板
上图: 代码:  <view><image class="scc" src=" ...
样式集（二）信息填写样式模板
上图: 代码: // pages/upInfo/upInfo.js Page({data: {tipsTxt: "请填写正确的业务流水号",showTips: false,show ...
仿微博发现页吸顶效果
整个首页布局采用 CoordinatorLayout 布局,实现正常的吸顶效果.然后监听 AppBarLayout 的展开与折叠.我直接上代码吧. 首页外部布局: <androidx.coord ...

样式集（七）仿微信发现页样式

样式集（七）仿微信发现页样式相关推荐

最新文章

热门文章