按钮

这次要实现的功能是一键返回顶部功能，看上去的效果就是，用户在游览商品的时候 ，下划到一定深度就会在右下角显示出一个按钮（如下图的按钮） 点击按钮之后就可以返回到当前页面顶部。 那么要实现这个效果，首先第一步就是声明一个名为My_BackTop的自定义组件（如下图） 这个组件现在还没有一个按钮该有的样子，所以必须把组件的UI先构筑好，让其先看上去像按钮，这样就必须在该组件的wxml文件引用上文中的按钮图片（代码如下） < view class = 'back-top' bindtap = "handleBackTop" > < image src = "/Mall_Image/Other_Image/top.png" / > < / view > 看上去的确像按钮了，但按钮位置和大小也必须规划一下，所以必须在该组件的wxss文件上写好所需的样式（代码如下） . back - top { position : fixed ; right : 10 rpx ; bottom : 10 rpx ; } . back - top image { width : 100 rpx ; height : 100 rpx ; } 按钮样式写好之后，就要开始写按钮的点击事件了，所以在该组件的js文件上声明一个名为handleBackTop的点击事件，该点击事件被触发之后会自动跳转到页面顶部（代码如下）

关键所在 第一个模态框的点击按钮的 data-target="#myModal"对应第一个模态框的id=“myModal”;所以一个页面上不同模态框的启动就在于此 ，只需要把第二个模态框的按钮的data-target改为data-target="#myModal_1";第二个模态框的id改为id=“myModal_1”;就可以分别打开两个不同的模态框。增加多个模态框道理也是如此。 第一个模态框 按钮 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> 模态框主体 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label=

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 用在普通元素上时，只能监听 原生 DOM 事件 。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。 示例： <!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 动态事件 (2.6.0+) --> <button v-on:[event]="doThis"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 动态事件缩写 (2.6.0+) --> <button @[event]="doThis"></button> v-on传值 情况一： methods的方法有参数，传值 <button @click="msg('lhs')">传值</button> methods:{ msg(event){ console.log(event);//输出的lhs } } 注意： @click="msg('lhs')"传值时必须加上单引号，不加就传data里的参数 情况二： methods的方法有参数，但没有传值 <button @click="msg">传值</button> methods:{ msg(event){ console.log

前言： 制作一个类似于滴滴点击左上角头像，弹出一个侧边菜单其实特别简单。而且不需要导入任何包，直接复制几行代码即可。如果您想尝试一下，请自行new一个模板叫：Navigation Drawer Activity。自行复制代码导入项目。 1.纯净版demo 一定要看清楚使用的是v4包的项目还是AndroidX的项目，因为他们所对应的xml tag不一样。请按照自己项目，修改对应tag < ! -- v4项目头尾文件 < android . support . v4 . widget . DrawerLayout < / android . support . v4 . widget . DrawerLayout > -- > < ! -- Androidx项目头尾文件 < androidx . drawerlayout . widget . DrawerLayout < / androidx . drawerlayout . widget . DrawerLayout > -- > xml: < ? xml version = "1.0" encoding = "utf-8" ? > < android . support . v4 . widget . DrawerLayout xmlns : android = "http://schemas.android.com/apk

环境准备 官网 下载 GTK 源码包，因为本机 GLib 版本不够，下载一个非最新版的 GTK3.8.0 先学习用 直接阅读 "/gtk+-3.8.0/docs/reference/gtk/html/gtk-building.html" 进行操作 安装完毕， gtk3-demo 出来 gtk 的样例界面即安装搞定 实例学习 编译命令和编译脚本 编译参数包括 pkg-config --libs --cflags gtk+-3.0 为了方便，用脚本管理起来 build.sh #!/bin/bash if [ $# -lt 1 ]; then echo "usage: $0 [xxxx.c]" exit fi gcc -o $1_out $1 `pkg-config --libs --cflags gtk+-3.0` 一个简单的HelloWorld按钮 01_simple_button.c #include <gtk/gtk.h> // 回调函数1 void hello( GtkWidget *widget, GdkEvent *event, gpointer data ) { g_print("Hello World\n"); } // 回调函数2 void destroy( GtkWidget *widget, gpointer data ) { gtk_main_quit(); }

之前demo相关博客查看的，只有3.x多的版本才有这些图标显示出来。应该是某些属性是用的老的样式，新版的没研究先用这3.x版本的吧。 https://www.bootcdn.cn/font-awesome/ https://plugins.jquery.com/hotkeys/ 需要引入css: <link th:href="@{/css/bootstrap-combined.no-icons.min.css}" rel="stylesheet"/> <link th:href="@{/bootstrap-4.4.1-dist/css/bootstrap.min.css}" rel="stylesheet" type="text/css" /> <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/> <link th:href="@{/css/index.css}" rel="stylesheet"/> js: <script th:src="@{/js/jquery-3.4.1.min.js}"></script> <!--键盘事件--> <script th:src="@{/js/jquery.hotkeys.js}"></script> <!--bootstrap.bundle.min.js此文件包含Popper

1、创建商品分类分支goods_cate并push到远程 查看分支： git branch 创建分支： git checkout -b goods_cate 推送到远程：（以前码云中没有该分支，所以要加-u，如果码云中有该分支，则不需要加-u） git push -u origin goods_cate 2、通过路由加载商品分类组件 新建goods文件夹和Cate.vue文件： <template> <div> <h3>商品分类组件</h3> </div> </template> <script> export default { } </script> <style lang="less" scoped> </style> 添加路由： import Cate from '../components/goods/Cate.vue' const routes = [ { path: '/', redirect: '/login' }, // 重定向 { path: '/login', component: Login }, { path: '/home', component: Home, redirect: '/welcome', // 重定向 children: [ // 子路由 { path: '/welcome', component: Welcome }, { path:

一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。 这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚刚创建，还未进行数据观测和事件配置 }, created(){ //实例已经创建完成，并且已经进行数据观测和事件配置 }, beforeMount(){//模板编译之前，还没挂载 }, mounted(){ //模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示 }, beforeUpdate(){//组件更新之前 }, updated(){//组件更新之后 }, beforeDestroy(){//组件销毁之前 }, destroyed(){ //组件销毁之后 } 这几个钩子中，最常用的是 created() 与 mounted() 。 二、计算属性 计算属性也是用来存储数据，但具有以下几个特点： 数据可以进行逻辑处理操作 对计算属性中的数据进行监视 1、基本用法 <div id="app"> {{addZero}} </div> new Vue({ el: '#app', data: { num: 8 }, computed: { //这是计算属性的get方法，用于取值 addZero() { return this.num > 10 ? this.num :

超级实用且不花哨的js代码大全 收藏 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x event.y 窗体活动元素 document.activeElement 绑定事件 document.captureEvents(Event.KEYDOWN); 访问窗体元素 document.all("txt").focus(); document.all("txt").select(); 窗体命令 document.execCommand 窗体COOKIE document.cookie 菜单事件 document.oncontextmenu 创建元素 document.createElement("SPAN"); 根据鼠标获得元素： document.elementFromPoint(event.x,event.y).tagName=="TD document.elementFromPoint

文章目录 一、 React组件介绍 二、 组件的创建方式 2.1 函数创建组件 2.2 类组件 2.3 抽离成单独的JS文件 三、 React事件处理 3.1 事件绑定 示例 小结 3.2 事件对象 示例 四、 有状态组件和无状态组件 五、State和SetState 5.1 state基本使用 示例 5.2 setState() 修改状态 实例 小结 5.3 抽取事件处理函数 原因 六、 事件绑定this指向 6.1 箭头函数 6.2 利用bind方法 6.3 class的实例方法 小结 七、表单处理 7.1 受控组件 使用步骤 多表单元素优化 步骤 7.2 非受控组件 (不常用) 使用步骤 一、 React组件介绍 组件 是React的 一等公民 ，使用React就是在用组件 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特4：可复用、独立、可组合 二、 组件的创建方式 2.1 函数创建组件 函数组件：使用JS的函数（包括箭头函数）创建组件 约定1： 函数名称必须以 大写字母 开头 约定2： 函数组件 必须有返回值 ，表示该组件的结构 如果返回值为null，表示不渲染任何内容 实例 import React from 'react' import ReactDOM from 'react-dom' // 编写函数组件 function Hello ( ) {