#vue# #uni-app# 使用定位实现文字在图片上显示，且左右滑动附源码

思路：

（1）排版：使用弹性布局，将页面排列出来，再用v-for循环出来

（2）在最大的盒子加overflow-x: scroll; 达到左右滑动

（3）使用定位（子绝父相）让文字显示在图片上面

源码如下：

1.  
   <template>
2.  
   <view>
3.  
   <!-- 挑战活动版块 -->
4.  
   <view class="examine">
5.  
   <view class="examine-item" v-for="(item,index) in examinelist">
6.  
   <view class="examine-plan">
7.  
   <image :src="item.image" mode="widthFix"></image>
8.  
   <image :src="item.src" class="img" mode="widthFix"></image>
9.  
   <view class="title">请输入你的名字</view>
10.  
    <view class="start-time">请输入开始时间</view>
11.  
    <view class="end-time">请输入结束时间</view>
12.  
    <view class="examine-time">
13.  
    <view class="item">
14.  
    <view class="item-num">40</view>
15.  
    <view class="item-min">min</view>
16.  
    </view>
17.  
    <view class="item-day">day 01</view>
18.  
    </view>
19.  
    </view>
20.  
    </view>
21.  
    </view>
22.  
    </view>
23.  
    </template>
24.  
    <script>
25.  
    export default {
26.  
    data() {
27.  
    return {
28.  
    examinelist: [{
29.  
    image: '/static/home/motion4.jpg',
30.  
    src: '/static/home/3.png'
31.  
    },
32.  
    {
33.  
    image: '/static/home/motion5.jpg',
34.  
    src: '/static/home/2.png'
35.  
    },
36.  
    {
37.  
    image: '/static/home/motion6.jpg',
38.  
    src: '/static/home/3.png'
39.  
    }
40.  
    ],
41.  
    }
42.  
    },
43.  
    methods: {
44.  
     
45.  
     
46.  
     
47.  
    }
48.  
    }
49.  
    </script>
50.  
    <style lang="scss">
51.  
    .examine {
52.  
    overflow-x: scroll; //左右滑动
53.  
    padding: 20upx;
54.  
    display: flex;
55.  
    width: 95%;
56.  
    margin: 30upx auto;
57.  
    .examine-item {
58.  
    position: relative; //父盒子，相对定位
59.  
    display: flex;
60.  
    width: 256upx;
61.  
    height: 383upx;
62.  
    border-radius: 20upx;
63.  
    margin-right: 50upx;
64.  
    .examine-plan {
65.  
    position: relative;
66.  
    width: 256upx;
67.  
    height: 383upx;
68.  
    border-radius: 20upx;
69.  
    .img {
70.  
    width: 80upx;
71.  
    position: absolute;
72.  
    top: -20upx;
73.  
    left: 30upx;
74.  
    }
75.  
    .title {//子盒子
76.  
    position: absolute; //子盒子，绝对定位
77.  
    top: 95upx; //顶部与父盒子的距离
78.  
    left: 20upx; //左边与父盒子的距离
79.  
    font-size: 28upx;
80.  
    color: #FFFFFF;
81.  
    }
82.  
    .start-time {
83.  
    position: absolute;
84.  
    top: 156upx;
85.  
    left: 20upx;
86.  
    font-size: 22upx;
87.  
    color: #FFFFFF;
88.  
    }
89.  
    .end-time {
90.  
    position: absolute;
91.  
    top: 200upx;
92.  
    left: 20upx;
93.  
    font-size: 22upx;
94.  
    color: #FFFFFF;
95.  
    }
96.  
    .examine-time {
97.  
    position: absolute;
98.  
    bottom: 40upx;
99.  
    left: 20upx;
100.  
     display: flex;
101.  
     width: 90%;
102.  
     margin: auto;
103.  
     justify-content: space-between; //子盒子左右排列
104.  
     align-items: flex-end; //指最后一个子盒子
105.  
     .item {
106.  
     display: flex;
107.  
     align-items: flex-end;
108.  
     .item-num {
109.  
     font-size: 40upx;
110.  
     color: #FFFFFF;
111.  
     }
112.  
     .item-min {
113.  
     font-size: 20upx;
114.  
     color: #FFFFFF;
115.  
     vertical-align: bottom; //文字底部与父盒子底部对齐
116.  
     }
117.  
     }
118.  
     .item-day {
119.  
     font-size: 20upx;
120.  
     color: #FFFFFF;
121.  
     vertical-align: bottom;
122.  
     }
123.  
     }
124.  
     image {
125.  
     width: 256upx;
126.  
     height: 383upx;
127.  
     border-radius: 20upx;
128.  
     }
129.  
     }
130.  
     }
131.  
     }
132.  
     </style>

效果展示：

（左右滑动） 

这篇好文章是转载于：学新通技术网