在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
1. 一般微信小程序中pages数组下面的第一项元素代表了启动需要显示的第一个页面。 2.如果pages目录下面创建一个目录posts,在page中如果设置错误,比如说:"pages": [ "pages/post/post", "pages/welcome/welcome" ] 会出现:pages/post/post.wxml字样。 3.图片引用原地址是src而不是scr,这里需要注意以下,有的时候就是会出现这种低级的错误。 4.在swiper-item里面添加了图片,如果单单是在swiper-item中的<image>设置style的宽高样式,加载出来的图片并不是完整的,那么我们要是想要到完整的图片,我们就必须在swiper里面再设置一样的宽高样式。(必须两个地方同时设置)。 5.swiper只是一个容器,要放什么内容还要看你在swiper设置了什么东西。 6.为了简化程序,我们采取在post.wxss中设置样式,使得图片铺满 swiper{ width:100%; height:500rpx; }
swiper image{ width:100%; height:500rpx; }
我有一个疑问:能不能用 .swiper{ width:100%; height:500rpx; } 代替上面的swiper?如果用.swiper的话,那就应该在<swiper>里面设置他的class。但是我设置了class以后虽然有图片输出但是却是没有铺满的,是什么原因呢?我又试了一下:我把swiper设置用class,而在swiper-item还是保持原样。如下: .s{ width:100%; height:500rpx; }
swiper image{ width:100%; height:500rpx; } 效果是一样的,图片也铺满。 如果,我第一个swiper保持不变,而第二个改为.swiper image。效果:第一张图片也就是(swiper)没有铺满,而第二张中(如果我在swiper-item中设置class=”.swiper image”,以后图片就可以铺满。但是,如果我在image中设置class=”.swiper image”,效果显示却是没有铺满)。如果我在第二张中把class=”.swiper image”改成:
什么问题啊??? 7. indicator-dots=“true”表示出现的三个滑动小黑点。autoplay=”true”表示自动切换,比如说图片的自动切换。interval="2000"这个是设置间隔多长时间就进行一次切换。(注意:如果我们设置 vertical=“true”,就是要使得那几张图片垂直切换,如果不设置则是默认水平切换的。) 8.如果我们要配置导航栏上面的颜色,那么应该新建.jion文件,我这里就是post.jion文件。然后再里面编辑: { "navigationBarBackgroundColor":"#405f80" } 9.
10. 相对路径和绝对路径 绝对路径,在图片路径设置的时候以“/”开头,一般是从根节点开始的。 相对路径,是指在图片路径设置的时候以“.”开头,以当前页面为参考标准。每两个点代表往上走一级,相对路径需要注意的是同级的路径。
11. 在margin的设置中,如果有两个以上(3~4)个需要设置那么我们就采用他的简化形式,顺序是 上-右-下-左。那么 margin-top:10rpx ; 12. margin-bottom:20rpx; 13. margin-left:10rpx;
那么就可以化简为: margin:10rpx 0 20rpx 10rpx; 14. 一般如果在一行上面有一个字,则可以用px,但是如果超过1个字了还是px就很容易造成字往下移动。所以超过1字运用rpx就行了。 15. swiper{ width:100%; height:500rpx; }
swiper image{ width:100%; height:500rpx; }
.post-container{ display: flex; flex-direction:column; margin-top:20rpx; margin-bottom:40rpx; background-color: #fff; border-bottom: 1px solid #ededed; border-top:1px solid #ededed; padding-bottom: 5px; }
.post-author-date{ margin:10rpx 0 20rpx 10rpx; }
.post-author{ width:60rpx; height: 60rpx; vertical-align: middle; }
.post-date{ margin-left: 20rpx; vertical-align: middle; margin-bottom: 5px; font-size:26rpx; }
.post-title{ font-size:34rpx; font-weight:600; color:#333; margin-bottom: 10px; margin-left:10px; }
.post-image{ margin-left:16px; width:100%; height:340rpx; margin:auto 0; margin-bottom: 15px; }
.post-content{ color:#666; font-size:28rpx; margin-left:20rpx; margin-bottom: 20rpx; letter-spacing: 2rpx; line-height: 40rpx; }
.post-like{ font-size:13px; flex-direction: row; line-height: 16px; margin-left: 10px; }
.post-like-image{ height:16px; width:16px; vertical-align: middle; }
.post-like-font{ vertical-align: middle; margin-right: 20px;
}
16. |
请发表评论