小程序学习基础(页面加载)

打开首页,然后点击第一个按钮进去心得页面

 

进入心得页面以后

第一个模块是轮播图用的是swiper组件,然后就是四个按钮绑定点击事件,最后就是下拉刷新,下拉滚动,上拉加载。代码顺序wxml,js,wcss,json。

<!--pages/one/one.wxml-->
<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view scroll-y="{{true}}" style="width:100%;height:1000rpx;" bindscrolltolower="lower">
<view><swiper autoplay circular><block wx:for="{{banners}}" wx:key="acm"><swiper-item> <image mode="widthFix" src="{{item.image}}"></image>    </swiper-item>          </block></swiper><view><text>初始化numbers为:{{numbers}}</text></view><view class="btn1"><button bindtap = "onClickBtn">按钮      </button><block wx:for="{{btns}}" wx:key="*this"><button bindtap="btn" style="background-color: {{item}};" data-colors="{{item}}">{{item}}</button>      </block></view><view><block wx:for="{{50}}" wx:key="*this"><view>{{item}}</view></block></view>
</view>
</scroll-view>

 

// pages/one/one.js
Page({/*** 页面的初始数据*/data: {banners:[],recommends:[],numbers:100,btns:["red","blue","green"]},/*** 生命周期函数--监听页面加载*/onLoad(options) {wx:wx.request({url: 'http://123.207.32.32:8000/home/multidata',success: (result) => {const banners = result.data.data.banner.listconst recommends = result.data.data.recommend.listthis.setData({banners,recommends})}})},/*** 设置按钮点击事件*/onClickBtn(){console.log("你点击了一下按钮")},btn(event){const colors= event.target.dataset.colorsconsole.log(colors)},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {console.log("onPullDownRefresh")},/*** 页面上拉触底事件的处理函数*/onReachBottom() {console.log("onReachBottom")},/*** 页面下拉触底事件的处理函数*/lower(){console.log("下拉触底了")},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
/* pages/one/one.wxss */
image{width: 100%;
}
{"usingComponents": {"navigation-bar": "/components/navigation-bar/navigation-bar"},"enablePullDownRefresh": true
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/607587.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【开源商城推荐-LGPL-3.0】ts-mall 聚惠星商城

dts-shop: 聚惠星商城 DTS-SHOP&#xff0c;基于 微信小程序 springboot vue 技术构建 &#xff0c;支持单店铺&#xff0c;多店铺入驻的商城平台。项目包含 微信小程序&#xff0c;管理后台。基于java后台语言&#xff0c;已功能闭环&#xff0c;且达到商用标准的一套项目体…

金和OA C6 MailTemplates.aspx SQL注入漏洞

文章目录 产品简介漏洞概述指纹识别漏洞利用修复建议 产品简介 金和OA协同办公管理系统软件&#xff08;简称金和OA&#xff09;&#xff0c;本着简单、适用、高效的原则&#xff0c;贴合企事业单位的实际需求&#xff0c;实行通用化、标准化、智能化、人性化的产品设计&#…

Day05

19.用户与权限管理 19.1 用户管理 MySQL用户可以分为普通用户和root用户。root用户是超级管理员&#xff0c;拥有所有权限&#xff0c;包括创建用户、删除用户和修改用户的密码等管理权限&#xff1b;普通用户只拥有被授予的各种权限。 MySQL提供了许多语句用来管理用户账号…

php 的数据类型

目录 1.整型 2.浮点型 3.布尔类型 4.字符串 5.数组 6.NULL 7.对象 8.资源类型 查看变量对应值的类型&#xff1a; 1.使用“gettype(传入一个变量var)”来显示变量var的类型; 只会显示类型 2.使用“var_dump(传入一个变量var)”来显示变量var的类型; 会显示具体内容打…

5 - 视图|存储过程

视图&#xff5c;存储过程 视图视图基本使用使用视图视图进阶 存储过程创建存储过程存储过程进阶存储过程参数循环结构 视图 视图是虚拟存在的表 表头下的数据在真表里 表头下的数据存储在创建视图时 在select命令访问的真表里 优点&#xff1a; 安全数据独立简单 用户无需关…

ADS仿真 之 容差/良率分析

之所以要进行容差分析&#xff0c; 是因为任何电子元器件均存在一定的误差&#xff0c; 如电感、电容的精度等。 例如一个标称为2.0nH0.1nH的电感&#xff0c;代表的意思产品有99.74%的概率落在2.0nH0.1nH范围内&#xff0c; 即满足6σ &#xff0c;σ是标准偏差或者说方差&…

Hyperledger Fabric 二进制安装部署 Peer 节点

规划网络拓扑 3 个 orderer 节点&#xff1b;组织 org1 , org1 下有两个 peer 节点&#xff0c; peer0 和 peer1; 组织 org2 , org2 下有两个 peer 节点&#xff0c; peer0 和 peer1; 节点宿主机 IPhosts端口cli192.168.1.66N/AN/Aorderer0192.168.1.66orderer0.example.com70…

案例分享:当前高端低延迟视频类产品方案分享(内窥镜、记录仪、车载记录仪、车载环拼、车载后视镜等产品)

若该文为原创文章&#xff0c;转载请注明出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/135439369 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结…

大模型学习

大模型的参数量和显存占用估算 现在业界的大语言模型都是基于transformer模型的&#xff0c;模型结构主要有两大类&#xff1a;encoder-decoder&#xff08;代表模型是T5&#xff09;和decoder-only&#xff0c;具体的&#xff0c;decoder-only结构又可以分为Causal LM&#x…

鸿蒙系统应用开发之开发准备

今天我们来聊一聊鸿蒙系统应用开发之前&#xff0c;要做什么准备工作&#xff0c;如下图所示&#xff0c;我们要做的就是安装DevEco Studio&#xff0c;然后配置开发环境。 老规矩&#xff0c;拍拍手&#x1f44f;&#xff0c;上菜。 安装DevEco Studio 首先我们打开链接HUAWEI…

【每日论文阅读】Do Perceptually Aligned Gradients Imply Robustness?

近似人眼梯度 https://icml.cc/virtual/2023/oral/25482 对抗性鲁棒分类器具有非鲁棒模型所没有的特征——感知对齐梯度&#xff08;PAG&#xff09;。它们相对于输入的梯度与人类的感知非常一致。一些研究已将 PAG 确定为稳健训练的副产品&#xff0c;但没有一篇研究将其视为…

YOLOv8改进 | 损失函数篇 | SlideLoss、FocalLoss分类损失函数助力细节涨点(全网最全)

一、本文介绍 本文给大家带来的是分类损失 SlideLoss、VFLoss、FocalLoss损失函数,我们之前看那的那些IoU都是边界框回归损失,和本文的修改内容并不冲突,所以大家可以知道损失函数分为两种一种是分类损失另一种是边界框回归损失,上一篇文章里面我们总结了过去百分之九十的…

利用人工智能和机器人技术实现复杂的自动化任务!

这篇mylangrobot项目由neka-nat创建&#xff0c;本文已获得作者Shirokuma授权进行编辑和转载。 https://twitter.com/neka_nat GitHub-mylangrobot &#xff1a;GitHub - neka-nat/mylangrobot: Language instructions to mycobot using GPT-4V 引言 本项目创建了一个使用GPT-4…

docker/华为云cce 部署nacos 2.3.0 集群模式

镜像地址 https://hub.docker.com/r/nacos/nacos-server 版本 nacos/nacos-server:v2.3.0-slim 关键环境变量 使用mysql数据源 变量值备注MODEcluster启用集群模式MYSQL_SERVICE_DB_NAME数据库名MYSQL_SERVICE_USER数据库用户名MYSQL_SERVICE_PASSWORD数据库密码SPRING_D…

江科大-stm32-B站系统初识笔记P2

文章目录 一&#xff1a;ARM是什么二&#xff1a;关键字介绍 推荐视频&#xff1a;《 STM32入门教程-2023版 细致讲解 中文字幕》 一&#xff1a;ARM是什么 ①&#xff1a; ST – 意法半导体 M – Microelectronics 微电子 32 – 总线宽度 ARM架构: Cortex-A:Application 应用…

【echarts】雷达图参数详细介绍

1. 详细示例 var option {tooltip: {trigger: item},radar: {startAngle: 90,//第一个指示器轴的角度&#xff0c;默认90indicator: [// 指示器{ name: Category A, max: 220 },// name:指示器名称{ name: Category B, max: 200 },// max:指示器的最大值&#xff0c;可选&…

NODE笔记 0

一些简单的node学习笔记记录&#xff0c;是Vue等前端框架的基础 入门学习备忘录 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 node.js 内置网络服务器&#xff0c;是前端框架学习的基础&#xff1a; 概念&#xff1a;…

Linux--好玩的进度条

前言 先来看看我们想要达到的进度条效果&#xff0c;具体代码会在文章最后面放出。 一、创建文件及Makefile 我们需要实现声明的定义的分离&#xff0c;因此创建如下三个文件。 process.h prcess.c main.c。 touch process.h process.c main.c 同时还需要创建Makefi…

数据结构与算法-栈-移掉K位数字

移掉K位数字 给你一个以字符串表示的非负整数 num 和一个整数 k &#xff0c;移除这个数中的 k **位数字&#xff0c;使得剩下的数字最小。请你以字符串形式返回这个最小的数字。 示例 1 &#xff1a; 输入&#xff1a;num "1432219", k 3 输出&#xff1a;&quo…

kubernetes ingress 详解 (包含灰度发布/金丝雀部署)

写在前面&#xff1a;如有问题&#xff0c;以你为准&#xff0c; 目前24年应届生&#xff0c;各位大佬轻喷&#xff0c;部分资料与图片来自网络 内容较长&#xff0c;页面右上角目录方便跳转 ingress 介绍 架构 原理 官网资料&#xff1a;Ingress 控制器 | Kubernetes 我…