最近要实现一个登陆后直接展示一个手册弹窗的功能，然后发现小程序在手机端有些许不好使，所以根据小程序实现了一下，主要i用到的有scroll-view的滑块模组，然后就是思维流程了
希望可以和大家共勉

//wxml
<view class="modalDlg" wx:if="{{ifshow}}"><scroll-view scroll-y style="width: 100%; height: 400px;"refresher-enabled="{{true}}"refresher-threshold="{{80}}"refresher-default-style="none"refresher-background="lightgreen"bindrefresherpulling="{{refresh.onPulling}}"><image src="../images/bannertop.jpg" mode="widthFix" style="width:100%" ></image><image src="../images/bannercenter.jpg" mode="widthFix" style="width:100%" ></image><image src="../images/bannerbottom.jpg" mode="widthFix" style="width:100%" ></image></scroll-view><button class="butn"  bindtap="noshow">X</button>
</view>

//js
// An highlighted blocknoshow:function(){this.setData({ifshow:false})/**是否只显示一次 */// wx.setStorageSync('ifShowMemberRule', 'yes');}onLoad: function (options) {/**是否只显示一次 */let now= wx.getStorageSync('ifShowMemberRule');if(now!='yes'){this.setData({ifshow:true})}},
})

//wxss
.modalDlg{position: relative;width: 580rpx;height: 735rpx;position: fixed;top: 50%;left: 0;z-index: 9999;margin: -370rpx 85rpx;background-color: #fff;border-radius: 36rpx;display: flex;flex-direction: column;align-items: center;background-color: cadetblue;overflow:hidden}
.img{width: 100%;
}
.butn{position: absolute;right: 2px;margin-right: -5rpx;text-align: center;padding: 10rpx;line-height: 42rpx;width: 56rpx;height: 54rpx;font-size: 30rpx;
}

DEMO:
git 地址：https://github.com/idtuofeng/-Scroll-window.git
网址：https://github.com/idtuofeng/-Scroll-window