微信小程序开发教程之组件


study01

开发工具下载路径:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474644089359

视频教程:http://v.youku.com/v_show/id_XMTczNjc4Mjk5Mg==.html

我这里仅抛出常见开发问题哦:

1,image和text一起如何实现换行

微信小程序本质上是对android和ios的接口调用,跟html是不一样的,是没有办法通过<br>或者其他方式来直接实现换行。

但是可以通过设置父级视图为列布局来实现换行

<view style="margin-top:200rpx;font-size:15px;color:orange;display:flex;flex-direction:column;">
  <text style="">pqfitness</text>
  <image src="../../resource/images/pqfitness.jpg" style="width:100px;height:80px;"></image>
</view
这里就是设置了display:flex;flex-direction:colunm;这个问题解决了。这里系统默认是设置的行布局。


2,view的居中问题

方案一:通过设置父级视图align-items:center;那么所有的子视图都可以实现居中

方案二:子视图设置margin:auto;也可以实现居中


3,px和rpx单位的转换,以及对应的意义

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

不同的屏幕的分辨率是不一样的,为了更好的兼容各个手机设备,所以建议所有的度量单位都是用微信官方推荐的rpx。


4,sroll-view是默认可列布局,如何实现行布局,并可滑动。

<scroll-view scroll-x="true" style="width:220px;margin:10px auto;white-space: nowrap;" >
  <view style="background-color:green;width:200px;height:100px;display:inline-block;">1</view>
  <view style="background-color:yellow;width:200px;height:100px;display:inline-block;">2</view>
  <view style="background-color:green;width:200px;height:100px;display:inline-block;">3</view>
</scroll-view>
scroll-view设置white-space:nowrap;并且子元素设置为display:inline-block; 这两个样式的设置必须同时配置。

这里表示子元素设置为行内元素,并在父级视图中指出不换行。这样就完成了在一行中布局。


study02

视频教程:http://v.youku.com/v_show/id_XMTczNzY1MTA2OA==.html

swiper

  <swiper style="margin-top:100rpx;width:300rpx;height:100rpx;" indicator-dots="true" autoplay="true">
    <swiper-item>
      <view style="background-color:yellow;width:300rpx;height:100rpx;display:block;">1</view>
    </swiper-item>
    <swiper-item>
      <view style="background-color:green;width:300rpx;height:100rpx;">2</view>
    </swiper-item>
  </swiper>
swiper和swiper-item里面的view都是需要设置width和height哦。最好是一样的大小。

问题:

1,直接在view后面添加swiper组件,然而并没有显示组件内容。

因为该view是系统自动生成,并设置样式为container,container在app.wxss中被设置height:100%;即占满了整个屏幕,那么在后面添加的任何的组件都是没有办法在屏幕上看到的。理论上来说,设计者就是希望你把所有的组件都放在container里面,而不是后面。container即是容器的意思,用来容纳各种组件。

2,swiper autoplay=false时,也会发生自动切换.

这里swiper有个bug,autoplay主动设置为false,也会出现自动滑动的bug。这个bug比较明显,应该很快微信就可以修复的。

目前为止,只有不设置swiper的autoplay就可以实现不自动滑动效果。

3,indicator-dots的位置可以调整吗?

indicator-dots目前是没有开放接口调整精确位置,但是可以通过设置swiper的width,height来调整dots的大概位置。毕竟这只是个简单的装饰,不用太在意。



===========喜欢的可以收藏文章,或者关注我哦,将持续更新文章以及教学视频=========


©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值