tnblog
首页
视频
资源
登录
愿你出走半生,归来仍是少年
排名
3
文章
317
粉丝
22
评论
14
bootstrap 栅格布局一小例子
剑轩 : 后端写样式有点痛苦哇
一点flex布局的运用
剑轩 : 后端写样式有点痛苦哇
vue.js常用指令
剑轩 : 可以可以,多总结一点
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

uni-app list聊天示例,官方示例地址

6217人阅读 2022/2/8 10:11 总访问:2138978 评论:0 收藏:0 手机
分类: uniapp


代码:

  1. <template>    
  2. <view>    
  3. <uni-card :is-shadow="false" is-full>    
  4. <text class="uni-h6">此示例展示了聊天列表的使用场景。</text>    
  5. </uni-card>    
  6. <uni-section title="圆头像且不显示分割线" type="line">    
  7. <uni-list :border="false">    
  8. <uni-list-chat v-for="item in listData" :avatar-circle="true" :key="item.id" :title="item.author_name" :avatar="item.cover"    
  9. :note="item.title" :time="item.published_at" :clickable="false"></uni-list-chat>    
  10. </uni-list>    
  11. </uni-section>    
  12. <uni-section title="带圆点" type="line">    
  13. <uni-list>    
  14. <uni-list-chat v-for="item in listData" :key="item.id" :title="item.author_name" :avatar="item.cover" :note="item.title"    
  15. :time="item.published_at" :badge-text="item.text" :clickable="false" badge-positon="left" badge-text="dot"></uni-list-chat>    
  16. </uni-list>    
  17. </uni-section>    
  18. <uni-section title="自定义右侧内容" type="line">    
  19. <uni-list>    
  20. <uni-list-chat v-for="item in listData" :key="item.id" :title="item.author_name" :avatar="item.cover" :note="item.title"    
  21. badge-positon="left" :badge-text="item.text">    
  22. <view class="chat-custom-right">    
  23. <text class="chat-custom-text">刚刚</text>    
  24. <uni-icons type="star-filled" color="#999" size="18"></uni-icons>    
  25. </view>    
  26. </uni-list-chat>    
  27. </uni-list>    
  28. </uni-section>    
  29. <uni-section title="带通知角标的单头像聊天列表" type="line">    
  30. <uni-list>    
  31. <uni-list-chat v-for="item in listData" :key="item.id" :title="item.author_name" :avatar="item.cover" :note="item.title"    
  32. :time="item.published_at" :clickable="true" :badge-text="item.text" @click="onClick"></uni-list-chat>    
  33. </uni-list>    
  34. </uni-section>    
  35. <uni-section title="带通知角标的多头像聊天列表" type="line">    
  36. <uni-list>    
  37. <uni-list-chat v-for="(item,index) in listData" :key="item.id" :title="item.author_name" :avatar="item.cover" :note="item.title"    
  38. :time="item.published_at" :clickable="true" :avatarList="avatar(index+1)" :badge-text="item.text" @click="onClick"></uni-list-chat>    
  39. </uni-list>    
  40. </uni-section>    
  41. </view>    
  42. </template>    
  43. <script>    
  44.  export default {    
  45.  components: {},    
  46.  data() {    
  47.  return {    
  48.  UNITS: {    
  49.  '年'31557600000,    
  50.  '月'2629800000,    
  51.  '天'86400000,    
  52.  '小时'3600000,    
  53.  '分钟'60000,    
  54.  '秒'1000    
  55.  },    
  56.  listData: [],    
  57.  avatarList: [{    
  58.  url'/static/logo.png'    
  59.  }, {    
  60.  url'/static/logo.png'    
  61.  }, {    
  62.  url'/static/logo.png'    
  63.  }]    
  64.  }    
  65.  },    
  66.  onLoad() {    
  67.  this.getList()    
  68.  },    
  69.  methods: {    
  70.  onClick() {    
  71.  uni.showToast({    
  72.  title'列表被点击'    
  73.  })    
  74.  },    
  75.  avatar(count) {    
  76.  let arr = []    
  77.  this.avatarList.forEach((item, index) => {    
  78.  if (index < count) {    
  79.  arr.push(item)    
  80.  }    
  81.  })    
  82.  return arr    
  83.  },    
  84.  getList() {    
  85.  var data = {    
  86.  column'id,post_id,title,author_name,cover,published_at' //需要的字段名    
  87.  };    
  88.  uni.request({    
  89.  url'https://unidemo.dcloud.net.cn/api/news',    
  90.  data: data,    
  91.  successdata => {    
  92.  if (data.statusCode == 200) {    
  93.  let list = this.setTime(data.data);    
  94.  list = this.reload ? list : this.listData.concat(list);    
  95.  list.map(item => {    
  96.  item.text = Math.floor(Math.random() * (1 - 20) + 20)    
  97.  return item    
  98.  })    
  99.  this.listData = this.getRandomArrayElements(list, 3)    
  100.  }    
  101.  },    
  102.  fail(data, code) => {    
  103.  console.log('fail' + JSON.stringify(data));    
  104.  }    
  105.  });    
  106.  },    
  107.  getRandomArrayElements(arr, count) {    
  108.  var shuffled = arr.slice(0),    
  109.  i = arr.length,    
  110.  min = i - count,    
  111.  temp, index;    
  112.  while (i-- > min) {    
  113.  index = Math.floor((i + 1) * Math.random());    
  114.  temp = shuffled[index];    
  115.  shuffled[index] = shuffled[i];    
  116.  shuffled[i] = temp;    
  117.  }    
  118.  return shuffled.slice(min);    
  119.  },    
  120.  setTime(items) {    
  121.  var newItems = [];    
  122.  items.forEach(e => {    
  123.  newItems.push({    
  124.  author_name: e.author_name,    
  125.  cover: e.cover,    
  126.  id: e.id,    
  127.  post_id: e.post_id,    
  128.  published_atthis.format(e.published_at),    
  129.  title: e.title    
  130.  });    
  131.  });    
  132.  return newItems;    
  133.  },    
  134.  format(dateStr) {    
  135.  var date = this.parse(dateStr)    
  136.  var diff = Date.now() - date.getTime();    
  137.  if (diff < this.UNITS['天']) {    
  138.  return this.humanize(diff);    
  139.  }    
  140.  var _format = function(number{    
  141.  return (number < 10 ? ('0' + number) : number);    
  142.  };    
  143.  return date.getFullYear() + '-' + _format(date.getMonth() + 1) + '-' + _format(date.getDate()) + ' ' +    
  144.  _format(date.getHours()) + ':' + _format(date.getMinutes());    
  145.  },    
  146.  parse(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串,转化为一个Date对象    
  147.  var a = str.split(/[^0-9]/);    
  148.  return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);    
  149.  },    
  150.  }    
  151.  }    
  152. </script>    
  153. <style lang="scss" >    
  154.  .chat-custom-right {    
  155.  flex1;    
  156.  /* #ifndef APP-NVUE */    
  157.  display: flex;    
  158.  /* #endif */    
  159.  flex-direction: column;    
  160.  justify-content: space-between;    
  161.  align-items: flex-end;    
  162.  }    
  163.  .chat-custom-text {    
  164.  font-size12px;    
  165.  color#999;    
  166.  }    
  167. </style>

官方示例地址:https://github.com/dcloudio/uni-ui/blob/master/pages/vue/list/chat.vue


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

uni-app list点击事件

很简单,clickable属性设置为true,然后增加click事件即可。&lt;uni-list-chat:clickable=&quot;true&quot;@click=&quot;go...

使用uni-app list聊天示例

要先加入uni-list-chat组件,没有的话可以从官网的插件直接导入,也可以把代码直接复制进去。 uni-list-chat.vue: &lt...

uni-app list官方文档

在官网的组件里边的 https://ext.dcloud.net.cn/plugin?name=uni-listhttps://hellouniapp.dcloud.net.cn/pages/extUI/...

css弹性盒子flex布局

css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

可输入下拉文本框据输入动态加载数据 jquery-editable-select

用到一个jquery-editable-select的控件github地址:https://github.com/indrimuska/jquery-editable-select这个插件的原理是...

.net mvc分部页.net core分部页

.net分部页的三种方式第一种:@Html.Partial(&quot;_分部页&quot;)第二种:@{ Html.RenderPartial(&quot;分部页&quot;);}...

css中单位pxemrem和vh/vw的理解

&gt;px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字...

让IIS支持webp格式图片让IIS支持vtt格式iis设置mime类型iis配置支持的类型

webp格式图片可以让图片体积变小。也让下载图片变得更加困难一点 在线制作webp工具 https://www.upyun.com/webp?utm_mediu...

网页上传文件断点续传的实现无视文件大小上传以及datatables基本用法

首先明白js是客户带执行代码,c#是服务器上执行代码。本地文件需要用到js处理,服务器端接受c#代码处理1.HTML页面,文件信...

如何使用图标像使用文字一样使用文本图标的方法

1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车然后选择图标;注意:每个类型的图标会大小不...

使用七牛云的cdn服务提高图片的加载速度

CDN介绍CDN的全称是Content Delivery Network,即内容分发网络。CDN加速主要是加速静态资源,如网站上面上传的图片、媒体,...

通俗易懂什么是.NET?什么是.NET Framework?什么是.NET Core?

朋友圈@蓝羽 看到一篇文章写的太详细太通俗了,搬过来细细看完,保证你对.NET有个新的认识理解原文地址:https://www.cnblo...

JS监听input、keydown有输入法时打字完成后触发事件

在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到c...

修改了css后让浏览器从缓存中更新

当我们修改了css后,如果不做一些操作,浏览器是不会自动更新我们的样式文件的。除非是过期或者用户手动刷新清理缓存等。所...