近期一个称重设备微信端开发前端知识点，及使用插件遇到的常见问题

一、进度条的实现

前期制作代码如下：

1、总体效果如下图：

 

 

2、html代码如下：

                <div class="data_list" id="data_list">
                    <div class="item clearfix">
                        <div class="left_mod">
                            <span class="value">66.3</span><br />
                            <span class="name">体重(kg)</span>
                        </div>
                        <div class="right_mod">
                            <div class="level">
                                <ul class="clearfix"><li>偏低</li><li>标准</li><li>偏重</li><li>肥胖</li></ul>
                            </div>
                            <div class="progress" data-val="20">
                                <div class="progress_bar">
                                    <div class="color_bar">
                                    </div>
                                </div>
                                <div class="progress_bar_cover"><i class="circle"></i></div>
                            </div>
                            <div class="interval_line"><ul class="clearfix"><li></li><li></li><li></li><li></li></ul></div>
                            <div class="interval">
                                <ul class="clearfix">
                                    <li>12.5</li>
                                    <li>23.5</li>
                                    <li>29.5</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="item clearfix">
                        <div class="left_mod">
                            <span class="value">66.3</span><br />
                            <span class="name">脂肪率(%)</span>
                        </div>
                        <div class="right_mod type3 type3_1">
                            <div class="level">
                                <ul class="clearfix"><li>偏低</li><li>标准</li><li>偏重</li></ul>
                            </div>
                            <div class="progress" data-val="80">
                                <div class="progress_bar">
                                    <div class="color_bar">
                                    </div>
                                </div>
                                <div class="progress_bar_cover"><i class="circle"></i></div>
                            </div>
                            <div class="interval_line"><ul class="clearfix"><li></li><li></li><li></li></ul></div>
                            <div class="interval">
                                <ul class="clearfix">
                                    <li>12.5</li>
                                    <li>23.5</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="item clearfix">
                        <div class="left_mod">
                            <span class="value">66.3</span><br />
                            <span class="name">脂肪率(%)</span>
                        </div>
                        <div class="right_mod type3">
                            <div class="level">
                                <ul class="clearfix"><li>偏低</li><li>标准</li><li>偏重</li></ul>
                            </div>
                            <div class="progress" data-val="80">
                                <div class="progress_bar">
                                    <div class="color_bar">
                                    </div>
                                </div>
                                <div class="progress_bar_cover"><i class="circle"></i></div>
                            </div>
                            <div class="interval_line"><ul class="clearfix"><li></li><li></li><li></li></ul></div>
                            <div class="interval">
                                <ul class="clearfix">
                                    <li>12.5</li>
                                    <li>23.5</li>
                                </ul>
                            </div>
                        </div>
                    </div>
</div>

View Code