ad.vue 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <view>
  3. <text class="example-info">此示例展示了ad广告组件在 uni-list 中的应用</text>
  4. <uni-section title="列表嵌套广告" type="line"></uni-section>
  5. <uni-list>
  6. <template v-for="(item,index) in listData">
  7. <!-- <uni-list-ad v-if="(index > 0 && (index+1) % 10 == 0)"></uni-list-ad> -->
  8. <ad adpid="1111111111" v-if="(index > 0 && (index+1) % 10 == 0)" unit-id="" appid="" apid="" type="feed"></ad>
  9. <uni-list-item v-else :title="item.title" :note="item.author_name" :thumb="item.cover" thumb-size="lg" />
  10. </template>
  11. </uni-list>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. components: {},
  17. data() {
  18. return {
  19. UNITS: {
  20. '年': 31557600000,
  21. '月': 2629800000,
  22. '天': 86400000,
  23. '小时': 3600000,
  24. '分钟': 60000,
  25. '秒': 1000
  26. },
  27. listData: []
  28. }
  29. },
  30. onLoad() {
  31. this.getList()
  32. },
  33. methods: {
  34. getList() {
  35. var data = {
  36. column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
  37. };
  38. uni.request({
  39. url: 'https://unidemo.dcloud.net.cn/api/news',
  40. data: data,
  41. success: data => {
  42. if (data.statusCode == 200) {
  43. let list = this.setTime(data.data);
  44. this.listData = this.reload ? list : this.listData.concat(list);
  45. console.log(this.listData);
  46. }
  47. },
  48. fail: (data, code) => {
  49. console.log('fail' + JSON.stringify(data));
  50. }
  51. });
  52. },
  53. setTime(items) {
  54. var newItems = [];
  55. items.forEach(e => {
  56. newItems.push({
  57. author_name: e.author_name,
  58. cover: e.cover,
  59. id: e.id,
  60. post_id: e.post_id,
  61. published_at: this.format(e.published_at),
  62. title: e.title
  63. });
  64. });
  65. return newItems;
  66. },
  67. format(dateStr) {
  68. var date = this.parse(dateStr)
  69. var diff = Date.now() - date.getTime();
  70. if (diff < this.UNITS['天']) {
  71. return this.humanize(diff);
  72. }
  73. var _format = function(number) {
  74. return (number < 10 ? ('0' + number) : number);
  75. };
  76. return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDate()) + '-' +
  77. _format(date.getHours()) + ':' + _format(date.getMinutes());
  78. },
  79. parse(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串,转化为一个Date对象
  80. var a = str.split(/[^0-9]/);
  81. return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
  82. },
  83. }
  84. }
  85. </script>
  86. <style lang="scss" scoped>
  87. </style>