当前位置：首页 > 编程日记 > 正文

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

编程日记 2024-08-04 12:30:00

效果图：

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

https://www.dkcj.cn/info/12782.html

html向js传递id

html获取id方法： <div id"thediv1" style"display:block" onclick"ceshi(this.id)">技术A组</div> this.id ------>本身id转载于:https://www.cnblogs.com/wanlibingfeng/p/7613575.html

编程日记2024/08/04 12:20:00

javascript功能_功能性JavaScript简介

javascript功能Hey everybody! I’ve written a book called Discover Functional JavaScript, and it’s now ready in both paperback and Kindle formats.大家好！ 我已经写了一本书《发现功能JavaScript》 ，现在已经可以使用平装本和Kindle格式。 A…

编程日记2024/08/04 12:10:00

样式集，小程序群聊，聊天室样式，效果图

效果图注：（码云 group_chat_yun ） 代码： <!-- <view class"top"><image class"page_editright" catchtap"navBack" mode"widthFix" src"/images/editright.png&quo…

编程日记2024/08/04 12:00:00

GeoQuiz项目的开发与总结2

时间过得很快，第二阶段的学习结束了。本周的主要工作是完成了Geoquiz项目的剩余部分。首先是学到了些什么，最主要的是工作的流程，然后是界面的布局，菜单栏的设计到等。当然我觉得我学到的应该是工作制作的思维方式吧。再来说说…

编程日记2024/08/04 11:50:00

【12.16】VC++调用Word OLE进行自动化生成报表

！ 12-16更新初始化博客转载于:https://www.cnblogs.com/miki-52/p/5052689.html

编程日记2024/08/04 11:40:00

python timber_如何使用Timber更有效地记录日志

python timberby Ayusch Jain通过Ayusch Jain 如何使用Timber更有效地记录日志 (How to log more efficiently with Timber) Logging is one of the most used utilities in the Android framework. It is really helpful in debugging your code when debugging by break-poi…

编程日记2024/08/04 11:30:00

node 实现blog博客

https://cnodejs.org/topic/581b0c4ebb9452c9052e7acb转载于:https://www.cnblogs.com/zhangshuda/p/7640363.html

编程日记2024/08/04 11:20:00

小程序输入框导致界面上移，在输入的时候固定住页面的解决代码

效果： 代码： <view class"comment" style"bottom:{{bottom}}px"><view class"emoji_block" wx:if{{emoji_block_show}}><view wx:for{{connectemoji}} catchtap"add_biaoqing" id"{{item}}…

编程日记2024/08/04 11:10:00

react中纯函数_如何在纯React中创建电子邮件芯片

react中纯函数by Andreas Remdt由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure React) Imagine that you, the good-looking developer (yes, I’m talking to you!), want to build an invitation form where users can add one or mo…

编程日记2024/08/04 11:00:00

servlet程序HTTP Status 500 - Error instantiating servlet class 解决

一、项目存放路径问题(最常见) 在安装Tomcat时，运行程序都正常，但却打不开http://localhost:8080/，在Tomcat目录webapps下也找不到自己做的项目，这时因为你做的项目没有部署到webapps目录下，倒霉的时候就会遇到报错HTT…

编程日记2024/08/04 10:50:00

ASP.NET将原始图片按照指定尺寸等比例缩放显示图片

网站上可能会有很多图片，比如产品图片等，而且他们可能大小不一，宽度和高度也不一定一样，有的很大有的很小。如果放在一张网页上，可能会破坏版面，但是如果强制让他们按照指定的宽度和高度显示，因…

编程日记2024/08/04 10:40:00

前端开发框架选择

Vue Vant 适用场景：开发移动端 (vue) 上手难度：1 Vant是一款很好用的移动端UI框架，非常轻便，适合小型项目 https://vant-contrib.gitee.io/vant/#/zh-CN/ 微信小程序适用场景：微信小程序（小程序原生框架…

编程日记2024/08/04 10:30:00

anki_Anki如何挽救我的工程生涯

ankiby Jeffrey Shek通过Jeffrey Shek Anki如何挽救我的工程生涯 (How Anki saved my Engineering Career) I was burned out and my software career was stalling just three years in. My memory sucked. Was my poor memory from stress, lack of sleep or was it always …

编程日记2024/08/04 10:20:00

信息安全系统设计基础期末总结

【博客汇总】一、每周读书笔记链接汇总 •[第二周读书笔记] http://www.cnblogs.com/20135302wei/p/4842480.html •[第三周读书笔记] http://www.cnblogs.com/20135302wei/p/4858760.html •[第四周读书笔记] http://www.cnblogs.com/20135302wei/p/4870113.html •[第五周读…

编程日记2024/08/04 10:10:00

方法 retrun 异步的值，创建一个变量直接等于一个异步方法返回的值

需求：我想创建一个变量，他的值是一个openid， openid 从 getOpenid (封装的一个异步方法) 里面返回，通常调用 getOpenid ,会返回一个Promise 对象，.then 之后才能得到值，例如： //模拟一个异步方…

编程日记2024/08/04 10:00:00

ps混合模式glsl代码

https://github.com/jamieowen/glsl-blend 转载于:https://www.cnblogs.com/guochen/p/7645227.html

编程日记2024/08/04 09:50:00

应用程序启动器标记为信任_为什么您今天不能信任应用程序-以及如何解决它...

应用程序启动器标记为信任亲爱的每家高科技公司，请窃取这个想法 (Dear Every Single Tech Company, Please Steal This Idea) When you send a photo to someone, your messaging app actually first sends the photo to an app’s server, which then sends the p…

编程日记2024/08/04 09:40:00

小程序客服自动回复图片，云开发的实现

小程序先开通云开发，创建一个文件夹，并配置为云函数的目录小程序客服自动回复图片实现步骤： 1.云函数接收消息推送第一步：开发者工具云开发控制台中增加配置打开云开发控制台，到设置 tab 中选择全局设置 - 添加消…

编程日记2024/08/04 09:30:00

ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务解决

方法1： a、通过oracle 工具 Net Configuration Assistant 重新配置监听，注意如果有双网卡请配置第一块网上IP。如何知道哪一块是一块网卡，可以通过ipconfig命令查看最上面的ip就是一块网卡的 b、通过Net Configuration Assistant 工具配置 “…

编程日记2024/08/04 09:20:00

r语言编辑 d3.js_d3.js的语言介绍

r语言编辑 d3.jsby Matt Oxley由马特奥克斯利(Matt Oxley) d3.js的语言介绍 (A linguistic introduction to d3.js) 如何从一个试探者变成一个自信的用户 (How to go from a tentative to a confident user) d3.js is a fantastic library — but I can honestly tell you th…

编程日记2024/08/04 09:10:00

【Luogu3041】视频游戏的连击（AC自动机，动态规划）

题面链接题解首先构建出AC自动机然后在AC自动机上面跑DP 转移很显然从Trie树的节点跳到他的儿子节点但是要注意一个问题， 在计算的时候，每一个节点加入后能够造成的贡献要加上他的子串的贡献至于DP： 设f[i][j]表示已经使用了i个字母当…

编程日记2024/08/04 09:00:00

拥抱高效、拥抱 Bugtags 之来自用户的声音（三）

小编按：这是一篇 Bugtags 用户来稿，主要是介绍了使用 Bugtags 前后对测试及解决 Bug 所带来的变化，感谢山西农业大学 - 高正炎同学对 Bugtags 的信赖和支持。小编在这里诚邀各位热心用户向我们投稿，说出你使用 Bugtags 的故事。 0…

编程日记2024/08/04 08:50:00

小程序打开文档标题乱码处理

先下载，自定义临时文件目录名称，然后再打开就可以了。 wx.downloadFile({url: https://xxx.cn/sfxy.docx, //仅为示例，并非真实的资源filePath: wx.env.USER_DATA_PATH /这是自定义标题.docx,success(res) {console.log(0, res)wx.openDocum…

编程日记2024/08/04 08:40:00

我是“真正的”软件工程师吗？

by Sun-Li Beatteay通过孙丽贝蒂我是“真正的”软件工程师吗？ (Am I a “real” Software Engineer yet?) Am I a “real” Software Engineer yet?我是“真正的”软件工程师吗？ This question has haunted me for years. And it seems I’m not al…

编程日记2024/08/04 08:30:00

ntpdate[31915]: the NTP socket is in use, exiting

[rootmaster local]# ntpdate cn.pool.ntp.org 10 Oct 13:24:36 ntpdate[31915]: the NTP socket is in use, exitingcron 作业中运行 ntpdate，以便大约每隔一小时就设置一次本地时间。最近，我每次运行该命令时都会收到下列错误消息。 ntpdate[31915]: t…

编程日记2024/08/04 08:20:00

小程序云开发更新数组的指定对象的值

云开发，在小程序实现代码说明‘： 在这里，数据集合 groupList 中的 userList 是一个用户列表数组，我要更新数组中，openid 等于我的openid 的在线状态为 true。先查询条件，集合里面的 _id 等于我传的id&a…

编程日记2024/08/04 08:10:00

Unreal Engine 4 RenderTarget制作Live Camera效果

Unreal Engine 4 RenderTarget制作Live Camera效果先上效果： Live Camera我不知道怎么翻译。反正意思就是将一个摄影机的Image渲染到一个2D平面上。以下介绍下详细的实现方法： 1.创建一个Scene Capture 2D对象将这个对象拖动到合适的地方。2.创建Re…

编程日记2024/08/04 08:00:00

领导让我重构代码_领导不是由代码构成

领导让我重构代码The team leader is a key figure in a team of developers. It is a difficult role, involving both technical and social skills. This is the reason why not everyone is tailored for it.团队负责人是开发人员团队中的关键人物。这是一项艰巨的任务&am…

编程日记2024/08/04 07:50:00

Spring学习－理解IOC和依赖注入

最近刚买了一本介绍ssm框架的书，里面主要对Mybatis、spring、springmvc和redis做了很多的讲解，个人觉得虽然有的内容我看不懂，但是整体上还是不错的。最近正在学习中，一边学习一边做一些总结，现在我对这些思想技术还没…

编程日记2024/08/04 07:40:00

windows server2012怎样关机怎样重启-详细教程

|浏览：1991|更新：2014-12-15 17:33123456分步阅读百度经验:jingyan.baidu.com windows server2012和以往有些不同，关机/重启按钮不是在左边，甚至左边的“开始”都不见了，那怎样关机/重启呢？这里开始演示&am…

编程日记2024/08/04 07:30:00

相关文章：