components.nvue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <view>
  3. <view class="wrap">
  4. <view class="list-wrap">
  5. <u-cell-group title-bg-color="rgb(243, 244, 246)" :title="item.groupName" v-for="(item, index) in list" :key="index">
  6. <u-cell :titleStyle="{fontWeight: 500}" :title="item1.title"
  7. v-for="(item1, index1) in item.list" :key="index1" isLink @click="openPage" :name="item1.path">
  8. <image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
  9. </u-cell>
  10. </u-cell-group>
  11. </view>
  12. <u-gap height="30" bgColor="#fff"></u-gap>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. import list from "./components.config.js";
  18. export default {
  19. data() {
  20. return {
  21. list: list,
  22. desc: 'uView UI,是全面兼容nvue的uni-app生态框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水。',
  23. }
  24. },
  25. computed: {
  26. getIcon() {
  27. return path => {
  28. return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
  29. }
  30. },
  31. },
  32. methods: {
  33. openPage(detail) {
  34. const path = detail.name
  35. // #ifdef APP-NVUE
  36. // 目前安卓nvue下,由于overflow只能为hidden,所以布局上的原因,暂不支持steps和tooltip等组件
  37. if(uni.$u.os() === 'android') {
  38. const noSupportForAndroid = ['steps']
  39. for(let i = 0; i < noSupportForAndroid.length; i ++) {
  40. if(path.indexOf(noSupportForAndroid[i]) > -1) {
  41. return uni.$u.toast('安卓nvue下暂不支持此组件')
  42. }
  43. }
  44. }
  45. // #endif
  46. uni.$u.route({
  47. url: path
  48. })
  49. },
  50. }
  51. }
  52. </script>
  53. <style>
  54. /* page {
  55. background-color: rgb(240, 242, 244);
  56. } */
  57. </style>
  58. <style lang="scss" >
  59. .u-cell-icon1 {
  60. width: 36rpx;
  61. height: 36rpx;
  62. margin-right: 8rpx;
  63. }
  64. .u-cell-group__title__text {
  65. font-weight: bold;
  66. }
  67. </style>