微信小程序——尤克里里和弦查询

文件结构和效果预览

uk.wxml代码

<view class="body" ><view class="flex-row" ><view bindtap='c' class="{{btnc}}">C</view><view bindtap='d' class="{{btnd}}">D</view><view bindtap='e' class="{{btne}}">E</view><view bindtap='f' class="{{btnf}}">F</view><view bindtap='g' class="{{btng}}">G</view><view bindtap='a' class="{{btna}}">A</view><view bindtap='b' class="{{btnb}}">B</view></view><view ><image mode="scaleToFill" src="{{src}}"></image>    </view>
</view>
<view class="foot">
<text>制作人David</text>
</view>

image组件默认300*225px

mode属性表示图片的缩放方式	Value
scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	宽度不变，高度自动变化，保持原图宽高比不变

官方属性参考文档: 点击转跳

uk.wxss代码

/* pages/uk/uk.wxss *//* 主体页面布局，两边留白*/.body {margin: 0rpx 10rpx 25rpx 25rpx;
}/*flew水平布局 */.flex-row {display: flex;flex-direction: row;
}/*未激活按钮*/.inactive {display: inline-block;padding: 9.6rpx 16rpx;background-image: linear-gradient(#ddd, #bbb);/*背景渐变色*/border: 2rpx solid rgba(0, 0, 0, 0.2);border-radius: 9.6rpx;text-align: center;color: white;font-weight: bold;width: 100rpx;
}/*激活按钮*/.active {display: inline-block;padding: 9.6rpx 16rpx;background-image: linear-gradient(#ddd, #bbb);border: 2rpx solid rgba(0, 0, 0, 0.2);border-radius: 9.6rpx;text-align: center;color: white;font-weight: bold;width: 100rpx;background: #FFBF00;/*改变选中背景颜色*/
}/*尾部样式*/.foot {text-align: center;font-family: SimSun;font-size: 40rpx;background-color: lightgray;
}

uk.js代码

Page({//初始赋值data: {src: '../images/c.png',btnc: 'active',btnd: 'inactive',btne: 'inactive',btnf: 'inactive',btng: 'inactive',btna: 'inactive',btnb: 'inactive'},//点击按钮C触发事件c: function () {this.setData({src: '../images/c.png',btnc: 'active',btnd: 'inactive',btne: 'inactive',btnf: 'inactive',btng: 'inactive',btna: 'inactive',btnb: 'inactive'})},d: function () {this.setData({src: '../images/d.png',btnc: 'inactive',btnd: 'active',btne: 'inactive',btnf: 'inactive',btng: 'inactive',btna: 'inactive',btnb: 'inactive'})},e: function () {this.setData({src: '../images/e.png',btnc: 'inactive',btnd: 'inactive',btne: 'active',btnf: 'inactive',btng: 'inactive',btna: 'inactive',btnb: 'inactive'})},f: function () {this.setData({src: '../images/f.png',btnc: 'inactive',btnd: 'inactive',btne: 'inactive',btnf: 'active',btng: 'inactive',btna: 'inactive',btnb: 'inactive'})},g: function () {this.setData({src: '../images/g.png',btnc: 'inactive',btnd: 'inactive',btne: 'inactive',btnf: 'inactive',btng: 'active',btna: 'inactive',btnb: 'inactive'})},a: function () {this.setData({src: '../images/a.png',btnc: 'inactive',btnd: 'inactive',btne: 'inactive',btnf: 'inactive',btng: 'inactive',btna: 'active',btnb: 'inactive'})},b: function () {this.setData({src: '../images/b.png',btnc: 'inactive',btnd: 'inactive',btne: 'inactive',btnf: 'inactive',btng: 'inactive',btna: 'inactive',btnb: 'active'})}
})

通过改变CSS样式变换选中按钮样式和image中图片的

微信小程序——尤克里里和弦查询相关推荐

微信小程序：计算wxml里盒子的宽、高.....
微信小程序:计算wxml里盒子的宽.高等信息由于某些标签需要动态设置页面的高度,此时需要计算每个盒子的高度(由于盒子是一些东西撑开的,无法直接得到高度),根据盒子数量及边距距离设置页面高度得到的数 ...
微信小程序选择手机相册里的图片并上传到页面
微信小程序获取手机相册里的图片并传到页面上 index.wxml代码 // 相册中的照片 <button bindtap='handleChooseAlbum'>选中图片</butt ...
关于微信小程序云开发数据库中有数据查询不到的问题
最近在学习过程中遇到一个微信小程序云开发数据库中有数据查询不到的问题集合查询代码如下: Page({/* 采用了ES6的写法 */onLoad() {wx.cloud.database().coll ...
微信小程序：王者荣耀战力查询微信小程序源码下载支持安卓苹果微信QQ等多区查询
这是一款战力查询的微信小程序源码源码内自带了接口目前支持了微信,QQ,苹果,安卓全区都可以查询支持流量主收益,而且搭建安装简单使用微信开发者工具打开源码然后设置一下合法域名上传审核即可该小程 ...
微信小程序引用其他js里的方法
微信小程序中,在微信官方开发文档我们可以知道小程序的目录结构 . 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件 ...
微信小程序—使用app.js里定义的全局方法
微信小程序-使用全局方法 1.在app.js里定义全局方法,例如getData()方法 2.在index.js里使用全局方法getData() 首先获取全局let app = getApp(): 然后 ...
微信小程序如何从数组里取值_微信小程序获取各种数据值跟设置数据值
微信小程序获取各种数据值跟设置数据值. 修改设置data数组中的某个值://小程序接收后台数据若为数组时,下标最好为默认索引数组,从0开始排序 var articleId ='1'//对应数组中的索引 ...
微信小程序如何从数组里取值_微信小程序数据存储与取值详解
在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值. 比如: 在A页面input输入框,输入电话号码,点击添加.需要在B页面电话区域中,显示刚刚输入的电话号码. 因为这是两个 ...
微信小程序(第十四章) - 信息查询页面的实现
微信小程序(第十四章)- 信息查询页面的实现前言页面标题实现信息框的实现页面结构实现页面样式实现学生到校离校信息查询列表实现页面结构实现页面样式实现正在加载实现页面结构实现页面样 ...
微信小程序云开发之云数据库查询及动态输入
上一篇讲了微信小程序的云开发环境的部署以及数据的添加操作.这篇就讲讲数据的查询操作.文末我也会献上源码,以供食用.话不多说,马上献上干货. *打开上次的文档,在index.wxml上接着上次的代码添加 ...

微信小程序——尤克里里和弦查询

微信小程序——尤克里里和弦查询

文件结构和效果预览

uk.wxml代码

uk.wxss代码

uk.js代码

微信小程序——尤克里里和弦查询相关推荐

最新文章

热门文章