1000字范文 > 微信小程序-轮播图-九宫格布局--【开发实战（第2版）】

微信小程序-轮播图-九宫格布局--【开发实战（第2版）】

时间：2019-10-14 08:20:47

微信目录集链接在此：

不会导入/打开小程序的看这里：参考

文章目录

本系列校训学习资源的选择本文效果图轮播图最常见的轮播图代码本例使用的便于理解的轮播代码两种轮播代码的比较九宫格九宫格的实现实际操练-轮播第一步，就是找到文件。第二步，先改动一下最显眼的代码第三步狸猫换太子第四步加一点，走两步实际操练-九宫第一步找到文件第二步删一段最显眼的代码第三步修改自己喜欢的样式本文章使用的鼠标方案：配套资源作业：

本系列校训

用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！

只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序（130集）

/video/BV1nE41117BQ/

目录如下：

…

P303-微信小程序的环境准备08:21 00:00 到 05：16 获取APPid, 后面下载开发工具。

本文效果图

本例包含了两个知识点：

上半部分–轮播图下半部分-九宫格

轮播图

基本上只要你看到的网站（90%以上），都会看到轮播图，轮播如此重要，基本上成了网站的必备的模块，甚至有一些页面里面也大量出现轮播

小程序上呢？也是一样，毕竟小程序大概率也是一种商业的网站。当然也得要使用轮播了

最常见的轮播图代码

<swiper class="swiper_box" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange"circular="circular"><block wx:for="{{banners}}" wx:key="id"><swiper-item><image bindtap="tapBanner" data-id="{{item.businessId}}" src="{{item.picUrl}}_m" class="slide-image" /></swiper-item></block></swiper>

这是一般的小程序最常见的轮播图代码段。使用了block wx:for的标签

不过初学者的话，我倒不建议直接用这种。下面的这种方式要方便理解很多。小程序的开发呢？最好的方式就是，你打消“小程序开发很难”的这种观念，先让小程序每次都运行的很漂亮，然后扫二维码到自己手机上。毕竟兴趣才是学习的第一位。

本例使用的便于理解的轮播代码

<swiper indicator-dots="true" autoplay="true" interval="3000"><swiper-item><image src="/images/swiper01.jpg"></image></swiper-item><swiper-item><image src="/images/swiper02.jpg"></image></swiper-item></swiper>

两种轮播代码的比较

第一种是万能型，即可以做静态的纯前端，也可以后端定制，比如说你的小程序轮播图需要后台人员更换图片，

第二种就是纯前端，更换图片不太方便，但是就因为他方便，而且也不用数据库更换，所以也就更适合公司网站的这种小程序。

所以也不能说这种方式没有用武之地。

九宫格

九宫格，一款数字游戏，起源于河图洛书，与洛书是中国古代流传下来的两幅神秘图案，历来被认为是河洛文化的滥觞，中华文明的源头，被誉为宇宙魔方。

传上古伏羲氏时，洛阳东北孟津县境内的黄河中浮出龙马，背负河图，献给伏羲。伏羲依此而演成八卦，后为《周易》来源。又相传，大禹时，洛阳西洛宁县洛河中浮出神龟，背驮洛书，献给大禹。大禹依此治水成功，遂划天下为九州。又依此定九章大法，治理社会，流传下来收入《尚书》中，名《洪范》。

这个东西的历史那就悠久了，应用的方面那更是遍地都是，什么摄影，毛笔，数字游戏。小学生加减法等等。

不得不说，早期的小程序，尤其是主页真的是80%都是这种布局。请看下图，当然了，没有本文的例子那么精致。

九宫格的实现

1、首先添加图片资源文件

在项目根目录新建一个目录，取名为images , 用于存放图片资源，然后添加进入几张图片

2、在home目录下的home.js 文件中进行数据源的配置

3、依据列表渲染的知识点进行home.wxml的编程

①、从效果图上每个item都被细线包围，这是构建思路是，外部一个view，绘制顶部边框线

最外层view样式：

②、外部view里面每一个item绘制右侧和下侧的边框线，每个item的宽度设为33.33333% 意味着一行显示均分显示3个item。

③、每个item内部包含一个图片和一个文字，且item可以点击跳转到各自指定的页面

这里使用navigation组件

这是一般的九宫格的用法，

还是使用了wx:for+ data 的做法。

全部代码如下：

home.wxml文件

<view class="home_grids"><block wx:for="{{griddata}}" wx:key="item.name"><navigator url="../{{item.url}}/{{item.url}}" class='home_grid'><image src="{{item.img}}" class="home_icon"></image><view class="home_grid_text">{{item.name}}</view></navigator></block></view>

home.wxss文件

.home_grids {border-top: 1rpx solid #D9D9D9;overflow: hidden;margin-top: 10px}.home_grid{position: relative;float: left;padding: 20px 10px;width: 33.33333333%;box-sizing: border-box;border-right: 1rpx solid #D9D9D9;border-bottom: 1rpx solid #D9D9D9;}

实际操练-轮播

怎么样克服自己对代码的恐惧？当然是你改动一点，就可以看到程序的变化了。

第一步，就是找到文件。

事实上，这一步很关键，别看我码龄20多年，事实上，不管在哪个项目，都会时不时发生改了半天，发现程序完全不起作用，然后花了N小时，最后发现，改错文件了，当项目一大，代码一多，文件那也是成倍的增长，而且很多的文件有的时候叫的名字是一个，里面的代码也差不多，这个时候那就更容易看错文件了。

友情提示可以使用资源管理器里的搜索功能，真的很好用。

第二步，先改动一下最显眼的代码

如果这部分不太熟练的可以参考《微信小程序的目录解析–【浅入深出系列002】》

比如删掉一个代码块。净鼠标的这一段代码删除

删除了之后，要保存文件。

也有可能会出现下面的情况：

这种情况，一般就是标签不匹配。

这个时候，Ctrl+Z (这个快捷键有必要记住) 基本上80%以上的编辑器程序都是用这个快捷方式恢复到前一步正确的代码。

如果在恢复这个错之前，把这个错误的截图，并保存，查看几下那就更好了。面对页面出错不是大惊小怪，而是看看是啥错误信息，那你基本具备了向高手迈进的姿势了。

第三步狸猫换太子

将鼠标移动到<image src="***">这里，开发平台就会友善的提示，ctril+单击跳到相应的图片上。

然后就可以换图片了。这样是不是感觉很爽？

第四步加一点，走两步

3张图的轮播代码：

<swiper indicator-dots="true" autoplay="true" interval="3000"><swiper-item><image src="/images/swiper01.jpg"></image></swiper-item><swiper-item><image src="/images/swiper02.jpg"></image></swiper-item><swiper-item><image src="/images/swiper03.jpg"></image></swiper-item></swiper>

实际操练-九宫

第一步找到文件

第二步删一段最显眼的代码

第三步修改自己喜欢的样式

其实，九宫格的作用最大的应该是wxss

页面部分(我更喜欢叫wxml–微信妹儿)

wxss(微信大小S)

/* pages/grid/grid.wxss *//* 轮播图区域的样式 */swiper {height: 350rpx;}swiper image {width: 100%;height: 100%;}/* 九宫格区域的样式 */.grids {display: flex;flex-wrap: wrap;}/* 九宫格区域中每一个格子的样式 */.grids .item {width: 250rpx;height: 250rpx;border-right: 1rpx solid #eee;border-bottom: 1rpx solid #eee;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;}.grids .item:nth-child(3) {border-right: 0;}.grids .item:nth-child(6) {border-right: 0;}.grids .item:nth-child(9) {border-right: 0;}/* 九宫格区域中每一个格子中的图片和文字的样式 */.grids .item image {width: 70rpx;height: 70rpx;}.grids .item text {color: #999;font-size: 28rpx;margin-top: 20rpx;}

如果要修改代码的话，可以直接修改CSS格式。

比如，为了更清晰一些，将图片放大一点。

将格子变成了可爱一些，粉色

一般来说，最常见的操作就是这样子了