• 小程序壁纸demo,数据采集第三方的,没有服务端


    概述

    小程序demo,共有三个页面,首页,详情,搜索,数据来源于第三方。有兴趣的可以看看,比较简单

    详细

    小程序demo,共有三个页面,首页,详情,搜索,数据来源于第三方。有兴趣的可以看看,比较简单

    图片:

    部分代码:

    1. <view class="page {{isIPX}} {{Android}}">
    2. <view class="top-bar">
    3. <page-title isprev="{{false}}" title="小米壁纸" types="1"></page-title>
    4. <tag-swiper active="{{tagData.active}}" bindintap="inToggleTag" list="{{tagData.item}}"></tag-swiper>
    5. </view>
    6. <view class="content">
    7. <scroll-view scrollY bindscrolltolower="inGetList" class="scroll-bar" hidden="{{!(tagData.active==0)}}">
    8. <view class="wrap">
    9. <view class="flex-bar flex-wrap item-img">
    10. <view class="col-6 opacity" wx:for="{{tagData.item[0].list}}" wx:key="{{index}}">
    11. <image bindtap="inToSeeImg" class="img" data-src="{{item.imageUrl}}" mode="aspectFill" src="{{item.imageUrl}}"></image>
    12. </view>
    13. </view>
    14. </view>
    15. <g-loading mode="box" show="{{state.loading}}"></g-loading>
    16. </scroll-view>
    17. <scroll-view scrollY bindscrolltolower="inGetCategory" class="scroll-bar" hidden="{{!(tagData.active==index)}}" wx:if="{{index>0}}" wx:for="{{tagData.item}}" wx:key="{{index}}">
    18. <view class="wrap">
    19. <view class="flex-bar flex-wrap item-img">
    20. <view class="col-6 opacity" wx:for="{{item.list}}" wx:key="{{index}}">
    21. <image bindtap="inToSeeImg" class="img" data-src="{{item.imageUrl}}" mode="aspectFill" src="{{item.imageUrl}}"></image>
    22. </view>
    23. </view>
    24. </view>
    25. <g-loading mode="box" show="{{tagData.item[tagData.active].load}}"></g-loading>
    26. </scroll-view>
    27. </view>
    28. </view>

    部分代码:

    1. page,.page {
    2. height: 100%;
    3. overflow: hidden;
    4. }
    5. .swiper-bar {
    6. height: 400rpx;
    7. overflow: visible;
    8. }
    9. .swiper-image {
    10. height: 360rpx;
    11. transform: scale(0.9246,0.9246) translateZ(0);
    12. transition: transform 0.5s,-webkit-transform 0.5s;
    13. border-radius: 20rpx;
    14. overflow: hidden;
    15. box-shadow: 5rpx 5rpx 25rpx 0 rgba(0,0,0,0.1);
    16. }
    17. .swiper-image.scale {
    18. transform: scale(1,1) translateZ(0);
    19. }
    20. .menu-bar .li {
    21. width: 25%;
    22. text-align: center;
    23. font-size: 24rpx;
    24. color: #666;
    25. }
    26. .menu-bar image {
    27. width: 68rpx;
    28. height: 68rpx;
    29. }
    30. .row-bar {
    31. padding: 30rpx 0;
    32. }
    33. .yuan-ad{
    34. width: 100%;
    35. height: 80px;
    36. margin-bottom: 16px;
    37. margin-top: 8px;
    38. padding: 0 30rpx;
    39. box-sizing: border-box;
    40. }
    41. .yuan-ad navigator{
    42. width: 100%;
    43. height: 80px;
    44. background: #f9f9f9;
    45. border-radius: 4px;
    46. overflow: hidden;
    47. }

    项目结构:

    image.png

  • 相关阅读:
    Go 语言是如何实现切片扩容的?【slice】
    金蝶云星空与旺店通·企业奇门对接集成盘盈单查询打通创建盘点单
    并发-Java中的并发工具类
    PEG/蛋白Prote/抗体antibody/PAA/SiO2功能化 修饰NaY(Gd/Lu/Nd):Yb,Tm@NaYF4:Yb,Nd上转换纳米颗粒
    java日志框架之JCL和SLF4J
    swift UI 和UIKIT 如何配合使用
    SpringBoot项目中使用MultipartFile来上传文件(包含多文件)
    利用iframe实现局部打印(区域打印)
    GPT引领前沿与应用突破之GPT4科研实践技术与AI绘图
    查找(平衡二叉树、红黑树、B树)
  • 原文地址:https://blog.csdn.net/hanjiepo/article/details/133027843