小程序开发入门常见小问题-(1)

1、微信小程序轮播图

制作轮播图最大的问题就是图片之间的无缝衔接，而
在微信小程序中使用swiper组件可以和方便的解决该问题
具体实现脚本：
wxml:

<!-- wxml -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'><block wx:for="{{bnrUrl}}" wx:for-index="index"><swiper-item><image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image></swiper-item></block>
</swiper>
<!-- wxml --

js:
//js
Page({data: {"bnrUrl": [{"url": "img/1242x366-1531449084.jpg"}, {"url": "img/1242x366_djj_0706-1530871651.jpg"}, {"url": "img/1242x366_lyx_0709-1531122892.jpg"}, {"url": "img/14540040236323_1_o.jpg"}]}
});
//js

wxss:
//wxss
.u-wrp-bnr {width: 100%;height: 200rpx;display: block;position: relative;top: 100rpx;background: #f0f0f0;
}
.u-img-slide {width: 100%;height: inherit;
}
//wxss

2、尺寸单位； rpx与px的区别

rpx是微信小程序的尺寸单位，可以根据屏幕的宽度自适应。 1rpx=0.5px 不同设备换算也有区别： iPhone 5 1rpx=0.42px 1px = 2.34rpx iphon6 1rpx = 0.5px 1px=2rpx iphon6s 1rpx = 0.552px 1px=1.81rpx

3、盒子边框四边都设置阴影效果

box-shadow:0 0 10rpx rgba(85, 85, 85, 0.10);

5、在文字或标题下方添加下划线或分割线

利用下边框
text组件设置宽无效
text组件大小可以通过padding值设置
display: inline-block添加此属性，可使text组件设置宽度有效

border-bottom: 1px solid red;padding-bottom: 8px;

6、文字首行缩进

text标签的文字首行缩进，需要先转换为inline-block

text{display: inline-block;text-indent: 60rpx;text-align: left;
}

7、设置行间距

微信小程序 text 标签，发现设置行高后无效。解决办法就是在外层嵌套多一层 view，然后在 view 的样式中设置 line-height 属性即可。

<!-- xxx.wxml -->
<view class='view-text'><text class='text-content'> 嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</text>
</view>```wxss
// xxx.wxss
.view-text .text-content {font-size: 32rpx;
}.view-text {line-height: 100rpx;
}

小程序开发入门常见小问题-(1)相关推荐

微信小程序开发入门教程-小程序账号注册及开通
17年小程序开始公测,经过5年的发展,无论从组件.开发工具.api.生态.社区,都已经发展的非常成熟了.如果17年年初你看小程序,觉得无需安装即用即走还是一个理念的话.站在今天看过去,往往是先提出一个 ...
《微信小程序开发入门精要》——导读
本节书摘来自异步社区<微信小程序开发入门精要>一书中的导读,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看目录第1章微信小程序入门第1章第1节 ...
小程序onload_微信小程序开发入门之共享账本（十四）
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...
小程序开发入门基础篇-张代浩-专题视频课程
小程序开发入门基础篇-1995人已学习课程介绍采用小程序wepy框架,初级讲解如何搭建小程序的开发环境,创建工程,语法介绍.开发调试等,课程采用实战代码案例作为教材,通俗易懂,简单 ...
《微信小程序开发入门精要》——第2章，第2.8节带边距的水平等间隔排列
本节书摘来自异步社区<微信小程序开发入门精要>一书中的第2章,第2.8节带边距的水平等间隔排列,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看 2.8 ...
从零开始学前端第十七讲--微信小程序开发入门
微信小程序开发入门主讲人介绍沁修,葡萄藤技术总监项目经验丰富,擅长H5移动项目开发. 专注技术选型.底层开发.最佳代码实践规范总结直播录屏版 https://v.qq.com/x/page/n ...
微信小程序开发入门（连载）—— 开发前的准备工作
上一篇:微信小程序开发入门(连载)-- 认识微信小程序 1. 注册小程序帐号在微信公众平台官网首页(https://mp.weixin.qq.com)点击右上角的"立即注册"按钮 ...
学习（微信小程序开发入门及案例详解 --李骏，边思编著）
第一章初识小程序 1.小程序不仅在商业上具备很大潜力,同时在技术上解决了一套代码多端运行和动态发版的两大痛点,用户在微信中扫一扫或搜一下即可打开具备原生体验的应用,这给开发者带来了很大的想象空间 2 ...
微信小程序开发—小程序开发入门
我参加CSDN博客之星评选啦,感谢大家前往投票支持! 投票地址:http://blog.csdn.net/vote/list.html?keyword=anda0109#search 本篇将为大家详细 ...