home首页的水平滚动组件

<template>
          <div>

            <div ref="personWrap">
                      <ul class="myul"  ref="personTab">
                               
                        <!-- 15个Li标签 -->
                                <li v-for="(item,index) in ooojishilist" :key="index">
                                          <div class="xxxodiv">
                                    <img :src="item.mimage" alt="">
                                    <div class="bbq">
                                          {{item.name}}
                                    </div>
                                    <div class="bbq">
                                          接单量高
                                    </div>
                                           
                              </div>

                                   </li>

                        <!--       -->

                  </ul>
            </div>

               
      </div>
</template>

<script>
      import BScroll from "better-scroll";
      import {
            getHomeData
      } from "../../service/api";
      import Vue from "vue";

      export default {
            data() {
                  return {
                        mydata: [], //接收数据
                        ooojishilist: [],
                  };
            },
            mounted() {
                  let that = this
                  // 下面是获取所有技师
                  let ooomyurl = '/api/getalltodojishis/'
                  that.Axios.get(ooomyurl)
                        .then(function (resp) {
                              console.log("打印推荐的技师", resp.data); //
                              that.ooojishilist = resp.data;
                              that.$forceUpdate()

                        })
                  // 上面是获取所有技师
            },
            created() {
                  this.$nextTick(() => {
                        this.personScroll();
                  });
            },

            methods: {
                  personScroll() {
                        // 默认有六个li子元素，每个子元素的宽度为120px
                        // let width = this.mydata.length * 120-170;//这里获取元素个数
                        let width = 15 * 150 + 250; //这里获取元素个数,这里用的死数据,所以直接用实数
                        this.$refs.personTab.style.width = width + "px"; // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
                        this.$nextTick(() => {
                              if (!this.scroll) {
                                    this.scroll = new BScroll(this.$refs.personWrap, {
                                          startX: 0,
                                          click: true,
                                          scrollX: true, // 忽略竖直方向的滚动
                                          scrollY: false,
                                          eventPassthrough: "vertical",
                                    });
                              } else {
                                    this.scroll.refresh();
                              }
                        });
                  },
            },
      };
</script>

<style scoped>
      .myli {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            position: relative;
            top: 15px;
      }

      .myul {
            display: flex;
            height: 100px;
            line-height: 30px;
            border-radius: 10px 10px 10px 10px !important;
            margin-left: 10px;
            margin-top: -5px;
            align-items: center;
      }

      /*  */

      .heart {
            width: 20px;
            height: 20px;
            transform: rotateZ(45deg);
            background: red;
      }

      .heart::after,
      .heart::before {
            content: "";
            width: 100%;
            height: 100%;
            border-radius: 50%;
            display: block;
            background: red;
            position: absolute;
            top: -50%;
            left: 0;
      }

      .heart::before {
            top: 0;
            left: -50%;
      }

      li {
            margin-right: 15px;
      }

      /*  */
      .xxxodiv {
            position: relative;
            width: 300px;
            height: 400px;
            border-radius: 5px;
            opacity: 0.8;
            box-shadow: 2px 2px 20px #e9e7ef;
      }

      .xxxodiv img {
            width: 280px;
            height: 280px;
            margin-left: 10px;
      }

      .xxxodiv .bbq {
            font-size: 26px;
            width: 100%;
            text-align: center;
            height: 50px;
            line-height: 50px;
      }

      /*  */
      .tuiclass {}
</style>