123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <template>
- <view
- class="u-page"
- ref="u-back-top"
- >
- <view class="u-demo-block">
- <text class="u-demo-block__title">自定义backTop(滚动页面即可在右下角看到图标)</text>
- <view class="u-demo-block__content">
- <view class="u-page__backTop-item">
- <u-checkbox-group
- placement="column"
- shape="square"
- @change="checkboxChange"
- v-model="value"
- >
- <u-checkbox
- :customStyle="{marginBottom: '8px'}"
- v-for="(item, index) in checkboxList"
- :key="index"
- :label="item.name"
- :name="item.name"
- >
- </u-checkbox>
- </u-checkbox-group>
- </view>
- </view>
- </view>
- <u-back-top
- :right="backTopData.right"
- :customStyle="backTopData.customStyle"
- :bottom="backTopData.bottom"
- :icon="backTopData.icon"
- :mode="backTopData.mode"
- :iconStyle="backTopData.iconStyle"
- :duration="backTopData.duration"
- :scrollTop="scrollTop"
- @click="click"
- ></u-back-top>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- value: ['自定义图标'],
- backTopData: {
- mode: 'circle',
- icon: 'arrow-upward',
- bottom: 100,
- customStyle: {},
- iconStyle: {},
- right:20,
- duration: 300
- },
- scrollTop: 0,
- // 被自定义的样式
- checkboxList: [{
- name: '显示方形',
- },
- {
- name: '自定义图标',
- },
- {
- name: '自定义距离',
- },
- {
- name: '自定义样式',
- },
- {
- name:'自定义返回顶部滚动时间',
- }
- ]
- }
- },
- onLoad() {
- // 演示中默认勾选了自定义图标
- this.backTopData.icon = "arrow-up"
- },
- onPageScroll(e) {
- this.scrollTop = e.scrollTop;
- },
- methods: {
- checkboxChange(n) {
- if (n.includes('显示方形')) {
- this.backTopData.mode = 'square'
- } else {
- this.backTopData.mode = "circle"
- }
- if (n.includes('自定义图标')) {
- this.backTopData.icon = "arrow-up"
- } else {
- this.backTopData.icon = "arrow-upward"
- }
- if (n.includes('自定义距离')) {
- this.backTopData.bottom = 300
- this.backTopData.right=20
- } else {
- this.backTopData.bottom = 100
- }
- if (n.includes('自定义样式')) {
- this.backTopData.customStyle = {
- backgroundColor: '#2979ff',
- }
- this.backTopData.iconStyle = {
- color: '#ffffff'
- }
- } else {
- this.backTopData.customStyle = {}
- this.backTopData.iconStyle = {}
- }
- if (n.includes('自定义返回顶部滚动时间')) {
- this.backTopData.duration =1500
- } else {
- this.backTopData.duration =300
- }
- },
- click() {
- console.log('click');
- }
- }
- }
- </script>
- <style lang="scss">
- .u-page {
- height: 1200px;
- &__backTop-item{
- margin-top:10px;
- }
- }
- </style>
|