小程序
文章平均质量分 68
这里是关于微信小程序的笔记
小R.
总之岁月漫长,然而值得期待
展开
-
html+css实现左侧固定右侧横向滚动的表格(百度小程序中怎么写表格样式)
最近在用百度小程序写项目,遇到一个问题,设计图中有个左侧固定右侧横向滚动的表格,查看小程序文档组件,并没有完全一致的。 倒是有个差不多的,乍看差不多,实则完全不一样,方向什么的都不同,且未提供更改方向等的属性方法,所以无奈之下只能手写。又发现并不支持table、th、td等,所以只能用 view 拼凑咯。 以下是我整理的一个小Demo,由百度小程序 view 写法改成了HTML中的 div 写法,可能有点简陋,但是自己还是蛮满意的,😄。 先来看样子,红色边框是我定的外部宽度。 再来上代原创 2021-12-15 11:45:37 · 1184 阅读 · 1 评论 -
如何做字母导航(手机通讯录)
最近项目开发中有个需求是做形如手机通讯录的字母导航,如下图示例那种。 最近是用智能小程序开发的项目,所以就贴一下智能小程序实现的代码,大家可以根据自己的需要更改样式或者逻辑。目前自测了是没有问题的。 首先是一个函数,这个函数是实现,把中文开头的拼音的首字母提出,比如上面图片里的S;把英文开头的首字母提出;把数字等归为"#"。 这里我当时卡壳了半天,思维有所受限,还是带我的导师分分钟搞定的,哈哈,夸张了一下。pySegSort(arr, dataIndex) { if (!S原创 2022-03-02 16:42:17 · 1369 阅读 · 1 评论 -
微信小程序(13):Component 实现公共组件
一、不需要进行组件间属性传递 我们的小程序一般都有固定头部和固定底部,在每个.wxml文件中都写入头部和底部的代码就会很麻烦,这时候我们就可以用到 Component 自定义组件。1. 新建 component 文件夹,在该文件夹创建 headerView 文件夹,然后右键点击“ 新建 Component ”2. 将头部代码剪切到 headerView.wxml 文件中,将对应的 wxss代码剪贴到headerView.wxss 文件中,例如:headerView.wxml 文件代码:<原创 2021-02-09 17:04:35 · 1390 阅读 · 0 评论 -
微信小程序(12):小程序的全局配置
文章目录一、entryPagePath:小程序默认启动首页二、pages:页面路径列表三、window:全局的默认窗口表现1. navigationBarBackgroundColor:导航栏背景颜色2. navigationBarTextStyle:导航栏标题颜色,仅支持 black / white3. navigationBarTitleText:导航栏标题文字内容4. navigationStyle:导航栏样式5. enablePullDownRefresh:是否开启全局的下拉刷新6. backgro原创 2021-01-10 16:54:49 · 2134 阅读 · 0 评论 -
微信小程序(11):冒泡事件与非冒泡事件
事件分为冒泡事件和非冒泡事件:冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。1. 冒泡事件:index.wxml 文件代码:<view class="out" bindtap="outTap"> <view class="inner" bindtap="innerTap"> <view class="item" bindtap="itemTap"></view&g原创 2021-01-10 11:57:26 · 333 阅读 · 0 评论 -
微信小程序(10):事件处理及数据交互
1. bindtapindex.wxml文件代码:<view class="box" bindtap="yunsuan">{{num}}</view>index.wxss文件代码:.box{ width: 200rpx; height: 200rpx; background-color: pink;}index.js文件代码:Page({ /** * 页面的初始数据 */ data: { num:1 }, yunsu原创 2021-01-10 11:35:34 · 174 阅读 · 0 评论 -
微信小程序(9):模板及引入
1. 新建 template 文件夹,再右键点击 新建page2. template.wxml 和 template.wxss 文件代码如下:<template name="header"> <view class="header">这是头部</view></template><template name="footer"> <view class="footer">这是底部</view></te原创 2021-01-10 11:02:49 · 339 阅读 · 1 评论 -
微信小程序(8):WXML数据绑定 条件渲染 列表渲染
文章目录一、数据绑定二、条件渲染三、列表渲染一、数据绑定WXML 中的动态数据均来自对应 Page 的 data。先在 index.js 文件里敲入 page,弹出以下代码:Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */原创 2021-01-10 09:56:56 · 1566 阅读 · 0 评论 -
微信小程序(7):常用的表单组件
文章目录一、button:按钮1、type:按钮的样式类型2、size:按钮的大小3、plain:按钮是否镂空,背景色透明4、disabled:是否禁用5、loading:名称前是否带 loading 图标6、form-type:用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件7、open-type:微信开放能力8、hover-class:指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果二、checkbox:多选三、radio:单选四原创 2021-01-09 16:59:38 · 3507 阅读 · 0 评论 -
微信小程序(6):基础内容组件
文章目录一、icon 图标二、progress1、percent:百分比0~1002、show-info:在进度条右侧显示百分比3、border-radius:圆角大小4、font-size:右侧百分比字体大小5、stroke-width:进度条线的宽度(指的是粗细)6、activeColor:已选择的进度条的颜色7、backgroundColor:未选择的进度条的颜色8、active:进度条从左往右的动画9、active-mode:backwards: 动画从头播;forwards:动画从上次结束点接着播原创 2020-12-28 14:50:56 · 346 阅读 · 2 评论 -
微信小程序(5):swiper滑动轮播组件
文章目录swiper 滑块视图容器wiper-item 仅可放置在swiper组件中,宽高自动设置为100%示例:index.wxml文件代码:<swiper class="banner" indicator-dots indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" autoplay interval="5000" current="1" circular previous-margin="20" n原创 2020-12-26 15:02:59 · 744 阅读 · 0 评论 -
微信小程序(4):可滚动视图区域组件
文章目录scroll-view 可滚动视图区域1、scroll-y:允许纵向滚动2、scroll-x:允许横向滚动3、scroll-top:设置竖向滚动条位置4、scroll-left:设置横向滚动条位置5、scroll-with-animation:在设置滚动条位置时使用动画过渡(配合上面两个使用)scroll-view 可滚动视图区域使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。原创 2020-12-26 11:39:43 · 2672 阅读 · 0 评论 -
微信小程序(3):图像媒体组件的用法
文章目录image 图片1、基本用法 src2、mode:图片裁剪、缩放的模式3、lazy-load:图片懒加载,在即将进入一定范围(上下三屏)时才开始加载4、show-menu-by-longpress:开启长按图片显示识别小程序码菜单5、三栏式布局image 图片支持 JPG、PNG、SVG、WEBP、GIF 等格式,2.3.0 起支持云文件ID。1、基本用法 src引入网络图片:<image src="https://ss2.bdstatic.com/70cFvnSh_Q1Y原创 2020-12-26 11:10:02 · 271 阅读 · 0 评论 -
微信小程序(2):小程序常用布局组件
文章目录一、view 视图容器1、基础使用2、hover-class、hover-start-time、hover-stay-time:指定按下去的样式类、按住后多久出现点击态、手指松开后点击态保留时间3、hover-stop-propagation:指定是否阻止本节点的祖先节点出现点击态二、text 文本1、基础使用2、selectable:文本是否可选 (已废弃)3、user-select:文本是否可选,该属性会使文本节点显示为 inline-block4、space:显示连续空格5、decode:是原创 2020-12-26 10:23:54 · 867 阅读 · 3 评论 -
微信小程序(1):开发者工具和小程序代码构成
一、下载安装微信开发者工具如下图所示,这里我下载的是 window64下载好后,点击下一步,最终安装成功。运行开发者工具,微信扫码后,界面如下:点击“+”号,创建小程序,输入项目名。选择地址,选用测试号界面如下...原创 2020-12-26 09:14:35 · 3505 阅读 · 0 评论