提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

第二天

第二天
2023-09-11 14:15:07 时间

封装css属性

mixins.styl

ellipsis()
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

引入方式：

<style lang="stylus" scoped>
 @import '~styles/mixins.styl'
 .icon-desc
        position: absolute
        left: 0
        right: 0
        bottom: 0
        height: .44rem
        line-height: .44rem
        text-align: center
        color: $darkTextColor
        ellipsis()
</style>

动态计算分页的数量

场景：比如你得到一组list数据要展示在页面上，一页展示8条，超过8条要展示在下一页，滑动翻滚展示那种。可以利用计算属性来达到效果

<script>
export default {
  name: 'HomeIcons',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        autoplay: false
      }
    }
  },
  computed: {
    pages () {
      const pages = []
      this.list.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

 ajax获取后台数据

vue提供了好几种ajax的方法，但是我们这边采用的是axios  模块，是vue官方提供的模块。

 npm  install  axios  --save  下载

 import axios from 'axios'    引用

 使用方法：

export default {
    name: 'Home',
    components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/index.json?city=' + this.city)   // 利用axios执行ajax请求
        .then(this.getHomeInfoSucc)                    // 请求成功之后执行这个回调函数
    },
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.weekendList = data.weekendList
      }
    }
  },
  mounted () {               //  挂载的时候执行这个函数
    this.lastCity = this.city
    this.getHomeInfo()
  },

}

转发请求来实现前后端接口分离

为啥要有这个功能呢？思考一下，我们前端开发的时候，数据是我们模拟的，接口url也是我们模拟的，然后我们开发ok之后后台给我们接口，我们再一个修改修改url，这样是很不友好的，也容易犯错，难不能这样呢？我们写的url就是后台真正的url，但是可以做一个转发，转发到我本地的数据源，这样当真正上线的时候，我们就不用再一个修改接口了。实现这个效果需要在配置文件中配置下。

\config\index.js 中

 proxyTable: {
      '/api': {
        target: 'http://localhost:80',
        pathRewrite: {
          '^/api':"/static/mock"       //意思是当我们请求api开头的接口时，vue就会帮我们自动转发到/static/mock路径下
        }
      }
    },

下拉实现

利用 better-scroll插件来实现的

https://www.cnblogs.com/xiaohaifengke/p/7308943.html    博客推荐

https://github.com/ustbhuangyi/better-scroll      gitHub地址

 mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)   // 实现滑动效果
  }
 
  this.scroll.scrollToElement(element)    //这个方法是说 你获取到element的Dom元素，放进去，会自动滚动到相关的dom位置

 

相关文章