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

　

尤克里里和弦

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

文件结构和效果预览

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中图片的

相关阅读