微信小程序用css做一个简单的（刻度计）

微信小程序用css做一个简单的（刻度计）

大家好 今天在小程序里边做一个简单的css刻度计 代码有什么问题 还请多多指教 第一次写文章 。

第一步 打开微信开发者编辑器

在page下新建kedu Page 如下图

第二步 我们先写刻度计样式

下面展示一些 内联代码片。

  <view class="text">
  <!--1. 先写一个幕布 text -->
      <view class="bg" >
      <!--2. 刻度计的父亲 也就是一层皮 bg-->
        <view class="bg_top" style="height:{{height}};transition: all 2s"></view>
        <!-- 3. 刻度计的颜色  这里指的就是刻度计里的水银  会动的（上边的style的height是后续要动态写的） bg_top-->
        <view style="width:100%;height:100%">
        <!-- 4. 和3同级  这个是刻度符号的父亲 也就是一层皮 -->
          <block wx:for='{1,2,3,4}'>
          <!-- 5. ok写一个循环 生成10个刻度  10个刻度  -->
                <view class="kedu" ></view>
                <!-- 6. ok这就是刻度 刻度 -->
          </block>
        </view>
      </view>
      <button bindtap="click">click</button>
      <!-- 这个button是 后续点击它  让它动态变化 -->
  </view> 



布局有不合理请指出 请分享优化

第三步 我们再写样式

/* pages/kedu.wxss */


/* 幕布text的样式 */
.text{
  width: 100%;
  background: #3d3d44;
  padding-top: 50rpx;
}
/* 刻度计的父亲 bg */
.bg{
  width: 50rpx;
  margin: 0 auto;
  height: 200rpx;
  border-radius: 25rpx;
  border: 5rpx solid black;
  position: relative;
}
/* 刻度计 水银的样式  bottom是将其固定到底部 水银是从下往上出的*/
.bg_top{
  width: 100%;
  background: linear-gradient(#f17a65, #3dcadf) no-repeat bottom;
  border-radius: 25rpx;
  position: absolute;
  bottom: 0;  
}
/* 刻度的样式  肯定能看懂吧？兄弟萌 */
.kedu{
    border-top: 2px solid rgba(0, 0, 0, 0.5);
    margin-left: 38rpx;
    height: 6%;
    width: 25%;
    z-index: 999;
    position: relative;
}
/*10个刻度  刻度在1，5的时候 长度要比别的刻度长 所以width：50%；margin自己去测试就懂了 应该长出来了。。。*/
.kedu:nth-child(1){margin-top: 58%;width: 50%;margin-left: 25rpx;}
.kedu:nth-child(5){width: 50%;margin-left: 25rpx;}


样式有不合理请指出 请分享优化

整体效果就这样

第四步 我们要让它动态的上升下降 ok 写js

// pages/kedu.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    height: '0',//提前将height设置为0  
    a: 0//定义一个参
  },

  onShow: function () {
    // 一进来是150rpx
    this.setData({
      height: '150rpx'
    })
  },
  click: function () {
    // 第一步  定义a把a拿到  a=0；
    var a = this.data.a
    this.data.a++ //让data的a加加
    this.setData({
      a: this.data.a//再赋值给定义的a
    })
    if (a == 3) {//当a等于3  ok让刻度计的水银高度可以变成20rpx 
      this.setData({
        height: '20rpx'
      })
    } else if (a == 5) {//同上
      this.setData({
        height: '180rpx'
      })
    } else if (a == 6) {//同上
      this.setData({
        a: 0
      })
    }
  },
})


js有不合理请指出 请分享优化

ok 结束 具体把我代码复制 可以体验 我不会发动图 第一次写 还请多多指教 加个关注