摘要：
全局配置在app.json中，小程序是全局配置的。以for循环的形式将数据数组中的数据传输到wxml。这是我对列表渲染的理解。Wxml代码：margin-bottom:10px；}。导航项｛25%；填充：10px；显示：内联块；文本对齐：居中；框大小：边框；｝。iconPic｛88rpx；高度：88rpx，｝。iconTitle｛color:#666；font-size:14px；｝主页的顶部和中部已完成：text组件官方文档image组件官方文档在这里使用mode属性中的widthFix，但图像的宽度应设置为wxss。Wxml代码：食物推荐{item.title}}wxss代码：。文章{background-color:#fff；padding:10px；}。文章顶部｛文本对齐：中心；颜色：rgb；｝。文章项｛padding bottom:10px；padding top:10px；border bottom style:double；border 3px；border color:#A1A7AD；｝。文章图片｛100%；｝。articleTitle｛font-size:16px；color:#A1A7AD；｝因为两个跳转页面的布局相同，所以只显示一个。Wxml代码：title｛position:relative；text align:center；font size:26px；color:#8CBEF5；padding:15px；margin-bottom:20px；｝。标题底部｛padding:20px；｝。标题底部：在{content:“”之后；位置：绝对；左：50px；顶部：自动；底部：0；右：自动；高度：5px；275px；背景色：#32b66b；}。text｛padding:10px；font-size:18px；line-height:1.5；｝css：after中的伪类用于控制边框的长度。
全局配置
在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 { 100%; height: 100%; }
图片宽高都设为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; 100%; flex-wrap: wrap; background-color: #fff; margin-bottom: 10px; } .nav-item { 25%; padding: 10px; display: inline-block; text-align: center; box-sizing: border-box; } .iconPic { 88rpx; height: 88rpx; } .iconTitle { color: #666; 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(116, 230, 144); } .article-item { padding-bottom: 10px; padding-top: 10px; border-bottom-style: double; border- 3px; border-color: #A1A7AD; } .articlePic { 100%; } .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 { 100%; } .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: 0; right: auto; height: 5px; 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设置横向滚动条位置。
滚动区域基本编写完毕。编写过程中，出现滚动区域无法拖动的问题，待明天解决。