![](https://img-blog.csdnimg.cn/20200728174504573.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
文章平均质量分 60
css
sun_wei_tao
打杂工程师
展开
-
CSS属性font-smoothing
在浏览大屏demo时发现样式中这两行代码-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;对字体进行抗锯齿渲染使字体看起来更清晰-webkit-font-smoothing: none | subpixel-antialiased:默认值 | antialiased:抗锯齿-moz-osx-font-smoothing: inherit | grayscale:抗锯齿...原创 2021-06-24 13:05:50 · 298 阅读 · 0 评论 -
css3自适应布局单位vw,vh
vw,vh为视口单位,1vw/vh等于视口宽度/高度的1% 小程序中同样适用小程序中窗口固定高度/宽度为100vh/vw,将窗口高度/宽度平分成100份,每一份为1vh,vw原创 2020-08-26 17:57:36 · 145 阅读 · 0 评论 -
微信小程序 内容评论-回复评论-回复回复的实现
效果图先展示代码js逻辑有详细注释代码格式有点乱复制粘贴格式化即可wxml<!-- 评论-回复-回复评论显示区域 --> <view class="container"> <!-- 总共评论数 --> <view class="total">共{{comment_list.length + comment_list2.length}}条评论</view> <!-- END -->原创 2020-08-19 14:32:08 · 12755 阅读 · 0 评论 -
微信小程序轮播图设置指示器样式(通过类名设置样式)
通过自带的类名设置指示器样式指示器样式类名wx-swiper-dot当前指示器样式类名wx-swiper-dot-active使用以上类名需要在前面加上外面swiper容器的类名 否则可能会不生效原创 2020-08-17 19:01:21 · 1035 阅读 · 0 评论 -
微信小程序Video组件实现视频、自定义播放按钮、封面图、封面图文字demo
效果图实现思路在video标签中添加view或cover-view标签,封面图可直接设置video组件的poster属性,自定义按钮和封面图文字包在view中设置定位即可,给自定义按钮绑定点击事件,触发事件后隐藏最外层view,给video绑定bindended事件 设置最外层view显示wxml```css.video_item { margin-top: 33rpx;}.video { width: 686rpx; height: 330rpx;}.cover { w原创 2020-08-05 19:49:49 · 9287 阅读 · 1 评论 -
原生微信小程序实现tab切换效果demo
效果图Wxml<!-- tab框 --><view class="nav_title"> <view class="nav_tab"> <!-- 如果选中的下表等于当前的索引,就使用active class名,否则class名为common --> <view wx:for="{{list}}" wx:key="list" class="{{selected==index?'active':'comm原创 2020-08-05 18:18:28 · 940 阅读 · 1 评论 -
微信小程序cover-view、view标签内文字无法自动换行的解决办法
cover-view标签内文字无法自动换行解决方案 :在对应的cover-view样式中添加如下样式white-space: pre-wrap补充white-space: 控制段落中的文本是否换行pre-wrap: 保留空格,正常换行view标签内文字无法自动换行解决方案 : 在对应的view样式中添加如下样式white-space: pre-line如果不起作用设置行高补充: pre-line:不保留空格,正常换行...原创 2020-08-05 17:59:09 · 1397 阅读 · 0 评论 -
微信小程序上拉触底事件函数onReachBottom不触发的解决方案
造成不触发的原因可能有以下几种情况配置属性问题高度问题滚动条不在顶部 需要回到顶部重新计算高度onReachBottom函数被覆盖1.配置属性问题在app.json或者本页的json文件中配置onReachBottomDistance属性,区别在于全局还是只在本页生效2.高度问题//设置容器高度为100%page{ height: 100%}3. 切换页面时 滚动条滚回到顶部//切换页面时调用APIwx.pageScrollTo({ scrollTop: 0})4.原创 2020-08-01 16:14:04 · 11683 阅读 · 5 评论 -
小程序轮播图指示器(跑马灯)样式
直接写入以下样式即可swiper类给swiper容器即可.swiper .wx-swiper-dot{ width:24rpx; display: inline-flex; height: 6rpx; margin-left: 10rpx; justify-content:space-between;}.swiper .wx-swiper-dot::before{ content: ""; flex-grow: 1; background: rg原创 2020-07-30 20:15:18 · 489 阅读 · 0 评论 -
微信小程序轮播图demo
1.wxml<!-- 轮播图 --><view class="box"> <swiper class='swiper' indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" autoplay="true" interval='2000' circular='true'> <block wx:for="{{imgList}}" wx:key="原创 2020-07-30 20:06:35 · 337 阅读 · 0 评论 -
CSS 图片周围空隙解决方法
1.将图片display属性设置为block2.给父级div设置样式font-size: 03.给父级div设置样式line-height: 0(测试效果不理想)原创 2020-07-28 17:42:37 · 879 阅读 · 1 评论