效果展示

Demo代码

wxml

<view class="box"><view class="boxitem" wx:key='index' wx:for="{{functions}}" bindtap="tofunction" data-url="{{item.url}}"><view class="boxitem_top"><image src="{{item.icon}}"></image></view><view class="boxitem_bottom"><text>{{item.name}}</text></view></view>
</view>

js

/ pages/functions/functions.js
const app = getApp();
Page({/*** 页面的初始数据*/data: {h: app.globalData.h,functions: [{icon: "/images/x1.png",name: "农学院",url: "../xueyuan/xueyuan"},{icon: "/images/x2.png",name: "农市大集",url: "../shiji/shiji"},{icon: "/images/x3.png",name: "AR扫病害",url: "../ar/ar"},{icon: "/images/x4.png",name: "交流论坛",url: "../luntan/luntan"},{icon: "/images/x5.png",name: "鲜蔬配送",url: "../peisong/peisong"},{icon: "/images/x6.png",name: "休闲农业",url: "../xiuxian/xiuxian"},]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},// 跳转页面tofunction: function (e) {//  wx.navigateTo({//   url: e.currentTarget.dataset.url,// })}
})

wxss

page {background-image: url(https://wx3.sinaimg.cn/mw690/006cV2kkgy1gcz9iabu19j30yi22oabf.jpg);background-size: cover;
}.box {width: 100%;display: flex;flex-direction: row;justify-content: center;flex-wrap: wrap;margin: 50% auto;
}.boxitem {width: 180rpx;height: 180rpx;margin: 25rpx;background-color: white;
.
.
.
.
.
.完整代码获取如下

微信小程序--功能区相关推荐

微信小程序调试php,微信小程序工具程序调试的三大主要功能区
程序调试主要有三大功能区:模拟器.调试工具和小程序操作区模拟器模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态. 编译代码点击工具左下角的编译 ...
微信小程序服务（功能）直达是什么?有什么作用?
微信小程序开放服务(功能)直达入口就在前天也就是9月28日,微信发文宣布服务(功能)直达开放,这一能力将让用户更便捷地找到所需服务,拉近商家与用户的距离.通过微信里面的搜一搜功能区搜索某一种产品或者 ...
微信小程序项目开发教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在小程序发布流程->小程序 ...
1万字！彻底看懂微信小程序
Q:为什么说小程序如炮友? A:小程序刚发布不久就流行一个段子:APP如原配,一年不用几次:服务号如情人,一个月固定几次:订阅号如酒店小卡片,天天可以卖广告:小程序像炮友,用完就走. 资本如嫖客,各个 ...
（后续更新）【微信小程序】毕业设计租房小程序开发实战，零基础开发房屋租赁系统小程序
文章目录说在前面小程序展示一.各功能模块介绍 1.房产服务模块 2.个人中心模块 3.动态发布模块 4.订单管理模块 5.房屋评价模块二.开发环境准备 1.注册微信小程序账号 2.下载微信开发 ...
【多人会议功能】uniapp - 微信小程序 - 腾讯云
目的:uniapp微信小程序通过腾讯云实现多人会议功能. 效果展示: 功能实现: 前提条件: 注册腾讯云账号,并完成实名认证. 推拉流标签不支持个人小程序,要求申请的企业类微信小程序. 步骤一:开 ...
【微信小程序调用百度API实现图像识别功能】----项目实战
本章主要讲述: 如何更快的上手小程序如何搭建一个页面以及跳转到另一个页面如何调用百度API接口实现图像识别技术如何在微信小程序的后台添加合法域名私信获取源码,有问题可以关注留言或私信,计算机毕 ...
微信小程序申请开通直播功能
微信小程序申请开通直播功能起因最近公司需要开通直播,之前做的电商小程序是左侧功能区是有直播菜单的,内测的时候就邀请开通了.现在公司做教育平台,登录后台后发现竟然右侧没有这个功能. 解决方案: 一. ...
微信小程序（一）：微信小程序申请注册与开发流程
本文主要用于介绍微信小程序开发过程中的注意点,查阅过程请结合微信的开发者文档一同观看. 本文基于微信小程序公测版,IDE:微信开发者工具 0.10.102800 本文档用于帮助公司内部初学者,如有感觉 ...

微信小程序--功能区

效果展示

Demo代码

wxml

js

wxss

微信小程序--功能区相关推荐

最新文章

热门文章