运动评价运动表现进度条

components/bar/index.js

+var startPoint;
+const min = 80;
+const max = 294;
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    currentProgress: {
+      type: Number,
+      value: 0
+    },
+    maxProgress: {
+      type: Number,
+      value: 10
+    },
+    canSlide: {
+      type: Boolean,
+      value: true
+    },
+    progressName:{
+      type:String,
+      value:""
+    },
+    slideImg:{
+      type:String,
+      value:"image/ic_slide_button_1.png"
+    },
+    titlesize:{
+      type:String,
+      value:"24rpx",
+    },
+    fontWeight:{
+      type:Number,
+      value:500,
+    },
+    color:{
+      type: String,
+      value: "#333333",
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    buttonLeft: 80,
+    progress: 0,
+    progressText: 0,
+  },
+  lifetimes: {
+    attached: function() {
+      // 在组件实例进入页面节点树时执行
+      this.setData({
+        progressText: (this.properties.currentProgress).toFixed(1),
+        buttonLeft: this.properties.currentProgress * (max - min) / this.properties.maxProgress + min,
+        progress: this.properties.currentProgress * (max - min) / this.properties.maxProgress
+      })
+    },
+    detached: function() {
+      // 在组件实例被从页面节点树移除时执行
+    },
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    buttonStart: function(e) {
+      startPoint = e.touches[0]
+    },
+    buttonMove: function(e) {
+      if (!this.properties.canSlide) {
+        return
+      }
+      var endPoint = e.touches[e.touches.length - 1]
+      var translateX = endPoint.clientX - startPoint.clientX
+      var translateY = endPoint.clientY - startPoint.clientY
+
+      startPoint = endPoint;
+      var buttonLeft = this.data.buttonLeft + translateX;
+      if (buttonLeft > max) {
+        return
+      }
+      if (buttonLeft < min) {
+        return
+      }
+      console.log(buttonLeft)
+      this.setData({
+        // buttonTop: buttonTop,
+        buttonLeft: buttonLeft,
+        progress: buttonLeft - min,
+        progressText: ((buttonLeft - min) / (max - min) * this.properties.maxProgress).toFixed(1)
+        //
+      })
+    },
+    buttonEnd: function(e) {
+
+    },
+
+    /**
+     * 获取分数
+     */
+    getScore(){
+      return this.data.progressText
+    },
+
+    setCurrentProgress(progress){
+      this.setData({
+        currentProgress:progress,
+        progressText: (progress).toFixed(1),
+        buttonLeft: progress * (max - min) / this.properties.maxProgress + min,
+        progress: progress * (max - min) / this.properties.maxProgress
+      })
+    }
+  }
+})
\ No newline at end of file

components/bar/index.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

components/bar/index.wxml

+<view class='progress-root-container'>
+  <text class='text' style='color:{{color}};font-size:{{titlesize}};font-weight:{{fontWeight}}'>{{progressName}}</text>
+  <view class='progress-max'></view>
+  <view class='progress-current' style="width:{{2*progress}}rpx"></view>
+  <text class='pencent-text'>{{progressText}}</text>
+  <image class='slice-button' src='{{slideImg}}' catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd" style="left:{{2*buttonLeft}}rpx"/>
+</view>

components/bar/index.wxss

+/* 588rpx max 160rpx min */
+.progress-root-container {
+  display: flex;
+  flex-direction: row;
+  width: 627rpx;
+  align-items: center;
+  height: 68rpx;
+}
+
+.text {
+  font-size: 24rpx;
+  color: #1A1A1A;
+  font-weight: normal;
+  position: absolute;
+  left: 60rpx;
+}
+
+.progress-max {
+  position: absolute;
+  left: 192rpx;
+  height: 8rpx;
+  width: 428rpx;
+  background: #E3E4E6;
+  border-radius: 30rpx;
+  z-index: 10;
+}
+
+.progress-current {
+  position: absolute;
+  left: 192rpx;
+  height: 8rpx;
+  width: 428rpx;
+  background: #FFC600;
+  border-radius: 30rpx;
+  z-index: 20;
+}
+
+.pencent-text {
+  font-size: 28rpx;
+  color: #1A1A1A;
+  left: 646rpx;
+  position: absolute;
+  z-index: 20;
+}
+
+.slice-button {
+  left: 588rpx;
+  width: 40rpx;
+  height: 30rpx;
+  position: absolute;
+  z-index: 30;
+}
\ No newline at end of file

pages/index/evaluation/evaluation.js

@@ -8,7 +8,8 @@ Page({
     texts: "已输入",
     min: 0,//最少字数
     max: 300, //最多字数
-    currentWordNumber:0
+    currentWordNumber:0,
+    currentValue: 50,
   },
 
   onLoad: function (options) {
@@ -36,53 +37,10 @@ Page({
     if (len > this.data.max) return;
     console.log(this.data)
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
+  onDrag(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
   },
 
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  }
 })
\ No newline at end of file

pages/index/evaluation/evaluation.json

 {
-  "usingComponents": {},
+  "usingComponents": {
+    "bar": "/components/bar/index"
+  },
   "navigationBarTitleText": "运动评价"
 }
\ No newline at end of file

pages/index/evaluation/evaluation.wxml

 <view class="cont">
 	<view class="performance">
 		<view class="title">运动表现</view>
-		<view class="progress-box">
-			<progress percent="100" show-info stroke-width="6" border-radius="8" activeColor="#FFC600" />
-		</view>
-		<view class="progress-box">
-			<progress percent="80" show-info stroke-width="6" border-radius="8" activeColor="#FFC600" />
-		</view>
-		<view class="progress-box">
-			<progress percent="90" show-info stroke-width="6" border-radius="8" activeColor="#FFC600" />
-		</view>
-		<view class="progress-box">
-			<progress percent="80" show-info stroke-width="6" border-radius="8" activeColor="#FFC600" />
-		</view>
-		<view class="progress-box">
-			<progress percent="80" show-info stroke-width="6" border-radius="8" activeColor="#FFC600" />
-		</view>
+		<bar id="bar1" class="bar1" currentProgress="10" maxProgress="10" canSlide="{{true}}" progressName="运动量" slideImg="../../images/ic_slide_button_1.png" />
+		<bar id="bar1" class="bar1" currentProgress="9" maxProgress="10" canSlide="{{true}}" progressName="体力" slideImg="../../images/ic_slide_button_1.png" />
+		<bar id="bar1" class="bar1" currentProgress="8" maxProgress="10" canSlide="{{true}}" progressName="完整度" slideImg="../../images/ic_slide_button_1.png" />
+		<bar id="bar1" class="bar1" currentProgress="6" maxProgress="10" canSlide="{{true}}" progressName="柔韧度" slideImg="../../images/ic_slide_button_1.png" />
+		<bar id="bar1" class="bar1" currentProgress="8" maxProgress="10" canSlide="{{true}}" progressName="耐力" slideImg="../../images/ic_slide_button_1.png" />
 	</view>
 	<view class="coach">
 		<view class="title">教练评语</view>
@@ -31,5 +21,5 @@
 	</view>
 </view>
 <view class="button">
-  <view class="apply" bindtap="goapplyResult">保存</view>
-</view>
+	<view class="apply" bindtap="goapplyResult">保存</view>
+</view>
\ No newline at end of file

pages/index/evaluation/evaluation.wxss

@@ -63,10 +63,23 @@ page {
   margin-bottom: 50rpx;
 }
 
+.txt{
+  color: #1A1A1A;
+  font-size: 24rpx;
+  line-height: 56rpx;
+}
+.bar{
+  width: 80%;
+}
+.head{
+  width: 12%;
+  color: #1A1A1A;
+  font-size: 24rpx;
+}
 /* 进度条样式 */
 .progress-box{
   width: 80%;
-  margin-left: 100rpx;
+  margin-left: 48rpx;
   margin-bottom: 20rpx;
 }