|
- <template>
- <view>
- <text class="title">水平滚动</text>
- <scroll-view class="scroll-view" scroll-x scroll-y="false">
- <view class="item red"></view>
- <view class="item green"></view>
- <view class="item blue"></view>
- </scroll-view>
- <text class="title">垂直滚动</text>
- <scroll-view scroll-into-view={{id}} class="scroll-view" scroll-y>
- <view class="item red"></view>
- <view id="green" onclick='fntest' class="item green"></view>
- <view id="blue" class="item blue"></view>
- </scroll-view>
- </view>
- </template>
- <style>
- .scroll-view {
- width: 100%;
- height: 150px;
- }
- .title {
- padding: 10px 0;
- font-size: 20px;
- }
- .item {
- width: 100%;
- height: 100%;
- }
- .red {
- background-color: #f00;
- }
- .green {
- background-color: #0f0;
- }
- .blue {
- background-color: #00f;
- }
- </style>
- <script>
- export default {
- name: 'test',
- data() {
- return {
- id: 'green',
- }
- },
- method: {
- fntest(){
- this.data.id = 'blue'
- }
- }
- }
- </script>
复制代码
测试可以的 |
|