微信小程序—day02

全局配置

在app.json中，对小程序进行全局配置。官方文档

tabBar是对底部/顶部导航栏的配置，图片的icon 大小限制为40kb，建议尺寸为 81px * 81px

去阿里矢量图网站，找到图片，存放到images文件夹中

app.json中的tabBar代码：

"tabBar": {

    "list": [{

      "pagePath": "pages/home/home",

      "text": "主 页",

      "iconPath": "images/home.png",

      "selectedIconPath": "images/home-red.png"

    },{

      "pagePath": "pages/user/user",

      "text": "我 的",

      "iconPath": "images/user.png",

      "selectedIconPath": "images/user-red.png"

      }

    ]

  }

我的底部导航栏：

swiper滑块视图

通过swiper,制作一个轮播图。官方文档

轮播图位于主页的顶部，wxml代码：

<view class='top-swiper'>

<swiper autoplay='true' indicator-dots='true' indicator-color='#fff' indicator-active-color='#8CBEF5' circular='true'>

  <swiper-item wx:for="{{banners}}">

    <image src='{{item.imgUrl}}'></image>

  </swiper-item>

</swiper>

</view>

wxss代码：

swiper-item image {

  width: %;

  height: %;

}

图片宽高都设为100%，相当于拉伸填充；虽然图片会变形，但无伤大雅。

列表渲染

列表渲染，其实就是for循环。官方文档

页面数据是存放在.js文件，里面的Page.data之内。

将data中的数组之内的数据，以for循环的形式传递到wxml之中，这是我理解的列表渲染。

通过列表渲染，完成了主页的中间部分。

wxml代码：

<view class='navs'>

<view class="nav-item" wx:for="{{icons}}">

  <view>

    <image class='iconPic' src='{{item.imgUrl}}'></image>

  </view>

  <text class='iconTitle'>{{item.name}}</text>

</view>

</view>

wxss代码：

.navs {

  display: flex;

  width: %;

  flex-wrap: wrap;

  background-color: #fff;

  margin-bottom: 10px;

}

.nav-item {

  width: %;

  padding: 10px;

  display: inline-block;

  text-align: center;

  box-sizing: border-box;

}

.iconPic {

  width: 88rpx;

  height: 88rpx;

}

.iconTitle {

  color: #;

  font-size: 14px;

}

主页的顶部与中部就完成了：

text组件

官方文档

image组件

官方文档

这里用到了mode属性中的widthFix，但要在wxss中对图片的宽度width进行设置。

navigator组件

官方文档

navigator组件用于页面的跳转。

利用navigator组件，编写主页底部，并完成底部文章的跳转页面。

wxml代码：

<view class='article'>

  <view class='article-top'>食物推荐</view>

  <view class='article-item' wx:for="{{article}}">

    <navigator url='{{item.link}}' open-type='navigate'>

      <image class='articlePic' src='{{item.imgUrl}}' mode='widthFix'></image>

      <view class='articleTitle'>{{item.title}}</view>

    </navigator>

  </view>

</view>

wxss代码：

.article {

  background-color: #fff;

  padding: 10px;

}

.article-top {

  text-align: center;

  color: rgb(, , );

}

.article-item {

  padding-bottom: 10px;

  padding-top: 10px;

  border-bottom-style: double;

  border-width: 3px;

  border-color: #A1A7AD;

}

.articlePic {

  width: %;

}

.articleTitle {

  font-size: 16px;

  color: #A1A7AD;

}

因为两个跳转的页面布局相同，只呈现一个的。

wxml代码：

<view>

  <image class='img' src='{{article.imgUrl}}' mode='widthFix'></image>

</view>

<view>

  <view class='title'>

    <view class='title-bottom'>{{article.title}}</view>

  </view>

  <view class='text'>

    <text decode='true'>{{article.content}}</text>

  </view>

</view>

wxss代码：

.img {

  width: %;

}

.title {

  position: relative;

  text-align: center;

  font-size: 26px;

  color: #8CBEF5;

  padding: 15px;

  margin-bottom: 20px;

}

.title-bottom {

  padding: 20px;

}

.title-bottom:after {

  content: "";

  position: absolute;

  left: 50px;

  top: auto;

  bottom: ;

  right: auto;

  height: 5px;

  width: 275px;

  background-color: #32b66b;

}

.text {

  padding: 10px;

  font-size: 18px;

  line-height: 1.5;

}

这里用到了css中的伪类  :after ，来控制边框的长短。

参考了博客：https://blog.csdn.net/Colossalis_c/article/details/71216339

最终完成后的主页与跳转页：

        

scroll-view可滚动视图区域

官方文档

scroll-x属性设为true，允许横向滚动。scroll-left设置横向滚动条位置。

滚动区域基本编写完毕。编写过程中，出现滚动区域无法拖动的问题，待明天解决。