微信小程序特殊进度条

风蕴子清

于 2024-04-13 11:36:07 发布

阅读量128

点赞数 2

文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/qq_52624304/article/details/134441053

版权

该篇文章详细描述了一个微信小程序中使用WXML、JS和CSS构建的动态进度条和文本展示组件，展示了如何根据百分比调整视图宽度和显示相应文本状态。

摘要由CSDN通过智能技术生成

.wxml

<view>
  <view class="num">
    <view class="num_tex" wx:for="{{newNum}}" wx:key="index">{{item}}</view>
  </view>
  <view class="progress">
    <view class="progress2">
      <view class="color" style="width: calc(100% / {{progressNum.bgcolor.length}} - 4rpx); background: linear-gradient(to right, {{item.first}}, {{item.end}});" wx:for="{{progressNum.bgcolor}}" wx:key="index">
        <view class="pro" style="padding-left: calc({{copiesLeft}} - 40rpx);" wx:if="{{index == indexNUm}}">
          <image src="{{imgUrl}}/upload/health/love.png" mode="aspectFill" />
        </view>
      </view>
    </view>
  </view>
  <view class="text">
    <view class="text_text" style="width: calc(100% / {{progressNum.bgcolor.length}} - 4rpx);" wx:for="{{progressNum.bgcolor}}" wx:key="index">{{item.text}}</view>
  </view>
</view>

.wxss

.progress {
	display: flex;
	align-items: center;
}

.progress2 {
	width: 100%;
	height: 12rpx;
	display: flex;
	justify-content: space-between;
}

.progress2 view {
	border-radius: 20rpx;
}

.pro{
	margin-top: -14rpx;
}

.num {
	display: flex;
	justify-content: space-evenly;
	margin: 0rpx 24rpx 16rpx;
}

.text {
	margin-top: 16rpx;
	display: flex;
	text-align: center;
}

image {
	width: 40rpx;
	height: 40rpx;
	display: block;
}

.js

正常js

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    envId: app.globalData.envId,
    imgUrl:app.globalData.imgUrl,
    progressNum: {
      num: [0,18.4, 23.9, 27.9,80],
      bgcolor: [{
          text: '偏瘦',
          first: '#EFECFF',
          end: '#D7CDF3'
        },
        {
          text: '标准',
          first: '#D7CDF3',
          end: '#C0AEE8'
        },
        {
          text: '超重',
          first: '#C0AEE8',
          end: '#A58ADA'
        },
        {
          text: '肥胖',
          first: '#A58ADA',
          end: '#8C69CD'
        },
      ],
      parcent: '80'
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.wipeOff()
    this.withTab()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  // 数据显示去掉首尾元素
  wipeOff(){
    let num = this.data.progressNum.num
    let newArr = num.slice(1,-1);
    this.setData({
      newNum: newArr
    })
  },

  // 设置每个view宽度
  withTab(){
    let num = this.data.progressNum.num
    let percent = this.data.progressNum.parcent
    num = num.map(item => parseFloat(item))
    percent =  parseFloat(percent)
    for(let i = 0; i < num.length; i++){
      if(percent < num[i]){
        let i2 = i-1
        let num2 = num[i] - num[i2]
        let percent2 = percent - num[i2]
        let copies = (parseInt((percent2/num2)*100) )+ '%'
        this.setData({
          copiesLeft: copies,
          indexNUm: i2
        })
        return
      } else {
        let indexI = this.data.progressNum.num.length
        let indexI2 = indexI-2
        this.setData({
          copiesLeft: '100%',
          indexNUm: indexI2
        })
      }
    }
  },
})

components

const app = getApp()
Component({
  options:{
    addGlobalClass: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    progressNum:{
      type: Object,
      value:{}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    envId: app.globalData.envId,
    imgUrl:app.globalData.imgUrl,
    progressNum:{},
  },

  /**
   * 组件的生命周期
   */
  lifetimes:{
    attached: function () {
      this.wipeOff()
    this.withTab()
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 数据显示去掉首尾元素
  wipeOff(){
    let num = this.data.progressNum.num
    let newArr = num.slice(1,-1);
    this.setData({
      newNum: newArr
    })
  },

  // 设置每个view宽度
  withTab(){
    let num = this.data.progressNum.num
    let percent = this.data.progressNum.parcent
    num = num.map(item => parseFloat(item))
    percent =  parseFloat(percent)
    for(let i = 0; i < num.length; i++){
      if(percent < num[i]){
        let i2 = i-1
        let num2 = num[i] - num[i2]
        let percent2 = percent - num[i2]
        let copies = (parseInt((percent2/num2)*100) )+ '%'
        this.setData({
          copiesLeft: copies,
          indexNUm: i2
        })
        return
      } else {
        let indexI = this.data.progressNum.num.length
        let indexI2 = indexI-2
        this.setData({
          copiesLeft: '100%',
          indexNUm: indexI2
        })
      }
    }
  },
  }
})